CSS: text ​

.instui-text · stable — تایپوگرافی متن بدنه با اصلاح‌کننده‌های اندازه، وزن، رنگ و سبک.

پریست‌های -variant-* و اصلاح‌کننده‌های -color-*/-size-*/-weight-* همگی روی همان عنصر ترکیب می‌شوند؛ بر خلاف heading، سطح معنایی ضمنی‌ای را رندر نمی‌کند.

Source: text.css

نحوه استفاده ​

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

نمونه‌ها ​

html
<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رنگ متن با تأکید هوش مصنوعی همراه با پس‌زمینهٔ برجسته.
.-color-brandرنگ متن برند.
.-color-dangerرنگ متن هشدار خطر (Danger).
.-color-primaryرنگ متن اصلی (Primary).
.-color-primary-inverseرنگ متن روی پس‌زمینهٔ تاریک (معکوس اصلی).
.-color-primary-onرنگ متن اصلی روی پس‌زمینهٔ رنگی.
.-color-secondaryرنگ متن فرعی (کمرنگ).
.-color-secondary-inverseرنگ متن روی پس‌زمینهٔ تاریک (معکوس ثانویه).
.-color-secondary-onرنگ متن ثانویه روی پس‌زمینهٔ رنگی.
.-color-successرنگ متن موفقیت (Success).
.-color-warningرنگ متن هشدار (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پریست نوع افسانه (Legend).
.-weight-boldوزن بولد.

توکن‌های مصرف‌شده ​

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 — این متن را به یک خط یا تعداد مشخصی از خطوط کوتاه می‌کند.