CSS: text ​

.instui-text · 안정 — 크기, 굵기, 색상 및 스타일 수식어가 적용된 본문 텍스트 타이포그래피.

-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배경 하이라이트가 있는 AI 강조 텍스트 색상.
.-color-brand브랜드 텍스트 색상.
.-color-danger위험(데인저) 텍스트 색상.
.-color-primary기본(Primary) 텍스트 색상.
.-color-primary-inverse어두운 배경용(Primary inverse) 텍스트 색상.
.-color-primary-on색상이 있는 배경 위의 기본 텍스트 색상.
.-color-secondary보조(희미한) 텍스트 색상.
.-color-secondary-inverse어두운 배경용(secondary inverse) 텍스트 색상.
.-color-secondary-on색상이 있는 배경 위의 보조 텍스트 색상.
.-color-success성공(Success) 텍스트 색상.
.-color-warning경고(Warning) 텍스트 색상.
.-size-largeLarge. -size-lg의 장기형 별칭.
.-size-lg크게(Large).
.-size-sm작음(Small).
.-size-small작음(Small). -size-sm의 장기형 별칭.
.-size-x-large매우 큼(Extra large). -size-xl의 장기형 별칭.
.-size-x-small매우 작음(Extra small). -size-xs의 장기형 별칭.
.-size-xl매우 큼(Extra large).
.-size-xs매우 작음(Extra small).
.-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굵은(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 — 이 텍스트를 한 줄 또는 지정된 줄 수로 잘라냅니다.