CSS: text

.instui-text · stable — Τυπογραφία κειμένου σώματος με τροποποιητές μεγέθους, πάχους, χρώματος και στυλ.

Τα presets -variant-* και οι τροποποιητές -color-*/-size-*/-weight-* συνδυάζονται στο ίδιο στοιχείο· σε αντίθεση με το heading, δεν αποδίδει κανένα έμμεσο σημασιολογικό επίπεδο.

Source: text.css

Χρήση

@import "@pantoken/components/components.css";
@import "@pantoken/components/text.css";

Παραδείγματα

<span class="instui-text -size-xs --display-block">x-small text</span>
<span class="instui-text -size-sm --display-block">small text</span>
<span class="instui-text -variant-content-quote --display-block">Quoted text</span>
<span class="instui-text -color-ai-highlight">AI highlight text</span>

Τροποποιητές

Τροποποιητής	Περιγραφή
.-color-ai	Καταργημένο — use .-color-ai-highlight.
.-color-ai-highlight	Χρώμα κειμένου με έμφαση AI και επισήμανση φόντου.
.-color-brand	Χρώμα κειμένου της μάρκας.
.-color-danger	Χρώμα κειμένου κινδύνου.
.-color-primary	Κύριο χρώμα κειμένου.
.-color-primary-inverse	Σε σκούρο φόντο (αντιστροφή κύριου) χρώμα κειμένου.
.-color-primary-on	Κύριο χρώμα κειμένου σε χρωματιστό φόντο.
.-color-secondary	Δευτερεύον (ατονισμένο) χρώμα κειμένου.
.-color-secondary-inverse	Σε σκούρο φόντο (αντιστροφή δευτερεύοντος) χρώμα κειμένου.
.-color-secondary-on	Δευτερεύον χρώμα κειμένου σε χρωματιστό φόντο.
.-color-success	Χρώμα κειμένου επιτυχίας.
.-color-warning	Χρώμα κειμένου προειδοποίησης.
.-size-large	Μεγάλο. Μακροσκελής συνώνυμο του -size-lg.
.-size-lg	Μεγάλο.
.-size-sm	Μικρό.
.-size-small	Μικρό. Μακροσκελής συνώνυμο του -size-sm.
.-size-x-large	Εξαιρετικά μεγάλο. Μακροσκελής συνώνυμο του -size-xl.
.-size-x-small	Εξαιρετικά μικρό. Μακροσκελής συνώνυμο του -size-xs.
.-size-xl	Εξαιρετικά μεγάλο.
.-size-xs	Εξαιρετικά μικρό.
.-style-italic	Πλάγια γραφή.
.-transform-capitalize	Κεφαλαιοποίηση κάθε λέξης.
.-transform-lowercase	Μικρά γράμματα στο κείμενο.
.-transform-uppercase	Κεφαλαία γράμματα στο κείμενο.
.-variant-content	Προεπιλογή τύπου περιεχομένου.
.-variant-content-important	Προεπιλογή τύπου σημαντικού περιεχομένου.
.-variant-content-quote	Προεπιλογή τύπου περιεχομένου-παραπομπής.
.-variant-content-small	Προεπιλογή τύπου μικρού περιεχομένου.
.-variant-description-page	Προεπιλογή τύπου περιγραφής σελίδας.
.-variant-description-section	Προεπιλογή τύπου περιγραφής ενότητας.
.-variant-legend	Προεπιλογή τύπου υπομνήματος.
.-weight-bold	Έντονο πάχος.

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--instui-color-institutional-brand-font-color-dark	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-color-institutional-brand-primary	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-text-ai-background-color	<color>	LightDarklight-dark(#F3E5F7, #6D3984)
--instui-component-text-ai-color	<color>	LightDarklight-dark(#8A49A7, #F3E5F7)
--instui-component-text-base-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-text-base-on-color	<color>	#ffffff
--instui-component-text-content-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-text-content-font-size	<length>	1rem
--instui-component-text-content-font-weight	<integer>	400
--instui-component-text-content-important-font-size	<length>	1rem
--instui-component-text-content-important-font-weight	<integer>	600
--instui-component-text-content-important-line-height	<percentage>	150%
--instui-component-text-content-line-height	<percentage>	150%
--instui-component-text-content-quote-font-size	<length>	1rem
--instui-component-text-content-quote-font-style	—	italic
--instui-component-text-content-quote-font-weight	<integer>	500
--instui-component-text-content-quote-line-height	<percentage>	150%
--instui-component-text-content-small-font-size	<length>	0.875rem
--instui-component-text-content-small-font-weight	<integer>	400
--instui-component-text-content-small-line-height	<percentage>	150%
--instui-component-text-description-page-font-size	<length>	1.25rem
--instui-component-text-description-page-font-weight	<integer>	400
--instui-component-text-description-page-line-height	<percentage>	150%
--instui-component-text-description-section-font-size	<length>	1rem
--instui-component-text-description-section-font-weight	<integer>	400
--instui-component-text-description-section-line-height	<percentage>	150%
--instui-component-text-error-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-text-font-size-large	<length>	1.75rem
--instui-component-text-font-size-medium	<length>	1rem
--instui-component-text-font-size-small	<length>	0.875rem
--instui-component-text-font-size-x-large	<length>	2.5rem
--instui-component-text-font-size-x-small	<length>	0.75rem
--instui-component-text-font-weight-bold	<integer>	600
--instui-component-text-font-weight-normal	<integer>	400
--instui-component-text-inverse-color	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-text-legend-font-size	<length>	0.75rem
--instui-component-text-legend-font-weight	<integer>	400
--instui-component-text-legend-line-height	<percentage>	150%
--instui-component-text-muted-color	<color>	LightDarklight-dark(#576773, #AAB0B5)
--instui-component-text-muted-on-color	<color>	#ffffff
--instui-component-text-primary-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-text-success-color	<color>	LightDarklight-dark(#037D37, #61C378)
--instui-component-text-warning-color	<color>	LightDarklight-dark(#BB4200, #FF905A)

Σχετιζόμενα

• heading — Τυπογραφία για επικεφαλίδες αντί για κείμενο σώματος.
• truncate — Κόβει αυτό το κείμενο σε μία γραμμή ή σε καθορισμένο αριθμό γραμμών.