Tools Module For CSS Typography.
sircus-tools-typography | v3.0.0
color
Primary
t-colorPrimaryDark
t-colorPrimary
t-colorPrimaryLight
<p class="t-colorPrimaryDark">...</p>
<p class="t-colorPrimary">...</p>
<p class="t-colorPrimaryLight">...</p>
Secondary
t-colorSecondaryDark
t-colorSecondary
t-colorSecondaryLight
<p class="t-colorSecondaryDark">...</p>
<p class="t-colorSecondary">...</p>
<p class="t-colorSecondaryLight">...</p>
Success
t-colorSuccessDark
t-colorSuccess
t-colorSuccessLight
<p class="t-colorSuccessDark">...</p>
<p class="t-colorSuccess">...</p>
<p class="t-colorSuccessLight">...</p>
Notice
t-colorNoticeDark
t-colorNotice
t-colorNoticeLight
<p class="t-colorNoticeDark">...</p>
<p class="t-colorNotice">...</p>
<p class="t-colorNoticeLight">...</p>
Warning
t-colorWarningDark
t-colorWarning
t-colorWarningLight
<p class="t-colorWarningDark">...</p>
<p class="t-colorWarning">...</p>
<p class="t-colorWarningLight">...</p>
Error
t-colorErrorDark
t-colorError
t-colorErrorLight
<p class="t-colorErrorDark">...</p>
<p class="t-colorError">...</p>
<p class="t-colorErrorLight">...</p>
Gray scale
t-colorBlack
t-colorGray90
t-colorGray80
t-colorGray60
t-colorGray40
t-colorGray30
t-colorGray20
t-colorGray10
t-colorGray5
t-colorWhite
<p class="t-colorBlack">...</p>
<p class="t-colorGray90">...</p>
<p class="t-colorGray80">...</p>
<p class="t-colorGray60">...</p>
<p class="t-colorGray40">...</p>
<p class="t-colorGray30">...</p>
<p class="t-colorGray20">...</p>
<p class="t-colorGray10">...</p>
<p class="t-colorGray5">...</p>
<p class="t-colorWhite">...</p>
font-family
EN
Typography
Typography
Typography
<p class="t-enSans">...</p>
<p class="t-enSerif">...</p>
<p class="t-monospace">...</p>
ja
アイデアは移動距離と比例する
アイデアは移動距離と比例する
<p class="t-jaSans">...</p>
<p class="t-jaSerif">...</p>
font-size
Typography
Typography
Typography
Typography
Typography
Typography
Typography
<p class="t-fontGt">...</p>
<p class="t-fontHg">...</p>
<p class="t-fontXl">...</p>
<p class="t-fontLg">...</p>
<p class="t-fontMd">...</p>
<p class="t-fontSm">...</p>
<p class="t-fontXs">...</p>
font-weight
normal bold bolder lighter italic
<span class="t-normal">normal</span>
<span class="t-bold">bold</span>
<span class="t-bolder">bolder</span>
<span class="t-lighter">lighter</span>
<span class="t-italic">italic</span>
text-decoration
decoNone underline overline through
<span class="t-decoNone">decoNone</span>
<span class="t-underline">underline</span>
<span class="t-overline">overline</span>
<span class="t-through">through</span>
text-transform
LOWERCASE uppercase capitalize
<span class="t-lowercase">LOWERCASE</span>
<span class="t-uppercase">uppercase</span>
<span class="t-capitalize">capitalize</span>
line-height
t-lineHeightXs
t-lineHeightSm
t-lineHeightMd
t-lineHeightLg
t-lineHeightXl
<p class="t-lineHeightSm">...</p>
<p class="t-lineHeightMd">...</p>
<p class="t-lineHeightLg">...</p>
letter-spacing
t-letterSpacingXs
t-letterSpacingSm
t-letterSpacingMd
t-letterSpacingLg
t-letterSpacingXl
<p class="t-letterSpacingXs">...</p>
<p class="t-letterSpacingSm">...</p>
<p class="t-letterSpacingMd">...</p>
<p class="t-letterSpacingLg">...</p>
<p class="t-letterSpacingXl">...</p>
white-space
nowrap
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
pre
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="t-nowrap">...</p>
<p class="t-pre">...</p>
Install
npm install sircus-tools-typography sircus-variables
CSS import
@import "sircus-tools-typography";
@import "sircus-tools-typography/responsive";
@import "sircus-variables";
CSS
/*
* sircus-tools-typography
================================================== */
.t-colorWhite { color: #FFF !important; }
.t-colorBlack { color: #000 !important; }
.t-colorGray90 { color: var(--gray-90) !important; }
.t-colorGray80 { color: var(--gray-80) !important; }
.t-colorGray70 { color: var(--gray-70) !important; }
.t-colorGray60 { color: var(--gray-60) !important; }
.t-colorGray50 { color: var(--gray-50) !important; }
.t-colorGray40 { color: var(--gray-40) !important; }
.t-colorGray30 { color: var(--gray-30) !important; }
.t-colorGray20 { color: var(--gray-20) !important; }
.t-colorGray10 { color: var(--gray-10) !important; }
.t-colorGray5 { color: var(--gray-5) !important; }
.t-colorPrimary { color: var(--primary) !important; }
.t-colorPrimaryDark { color: var(--primary-dark) !important; }
.t-colorPrimaryLight { color: var(--primary-light) !important; }
.t-colorSecondary { color: var(--secondary) !important; }
.t-colorSecondaryDark { color: var(--secondary-dark) !important; }
.t-colorSecondaryLight { color: var(--secondary-light) !important; }
.t-colorSuccess { color: var(--success) !important; }
.t-colorSuccessDark { color: var(--success-dark) !important; }
.t-colorSuccessLight { color: var(--success-light) !important; }
.t-colorNotice { color: var(--notice) !important; }
.t-colorNoticeDark { color: var(--notice-dark) !important; }
.t-colorNoticeLight { color: var(--notice-light) !important; }
.t-colorWarning { color: var(--warning) !important; }
.t-colorWarningDark { color: var(--warning-dark) !important; }
.t-colorWarningLight { color: var(--warning-light) !important; }
.t-colorError { color: var(--error) !important; }
.t-colorErrorDark { color: var(--error-dark) !important; }
.t-colorErrorLight { color: var(--error-light) !important; }
.t-decoNone { text-decoration: none !important; }
.t-underline { text-decoration: underline !important; }
.t-overline { text-decoration: overline !important; }
.t-through { text-decoration: line-through !important; }
.t-lowercase { text-transform: lowercase !important; }
.t-uppercase { text-transform: uppercase !important; }
.t-capitalize { text-transform: capitalize !important; }
.t-nowrap { white-space: nowrap !important; }
.t-pre { white-space: pre !important; }
.t-normal { font-weight: normal !important; }
.t-bold { font-weight: bold !important; }
.t-bolder { font-weight: bolder !important; }
.t-lighter { font-weight: lighter !important; }
.t-italic { font-style: italic !important; }
.t-enSans { font-family: var(--fontFamily-sansEn) !important; }
.t-enSerif { font-family: var(--fontFamily-serifEn) !important;}
.t-jaSans { font-family: var(--fontFamily-sansJa) !important; }
.t-jaSerif { font-family: var(--fontFamily-serifJa) !important;}
.t-monospace { font-family: var(--fontFamily-monospace) !important; }
.t-fontGt { font-size: var(--fontSize-gt) !important; }
.t-fontHg { font-size: var(--fontSize-hg) !important; }
.t-fontXl { font-size: var(--fontSize-xl) !important; }
.t-fontLg { font-size: var(--fontSize-lg) !important; }
.t-fontMd { font-size: var(--fontSize-md) !important; }
.t-fontSm { font-size: var(--fontSize-sm) !important; }
.t-fontXs { font-size: var(--fontSize-xs) !important; }
.t-fontTn { font-size: var(--fontSize-tn) !important; }
.t-fontMi { font-size: var(--fontSize-mi) !important; }
.t-lineHeightXs { line-height: var(--lineHeight-xs) !important; }
.t-lineHeightSm { line-height: var(--lineHeight-sm) !important; }
.t-lineHeightMd { line-height: var(--lineHeight-md) !important; }
.t-lineHeightLg { line-height: var(--lineHeight-lg) !important; }
.t-lineHeightXl { line-height: var(--lineHeight-xl) !important; }
.t-letterSpacingXs { letter-spacing: var(--letterSpacing-xs) !important; }
.t-letterSpacingSm { letter-spacing: var(--letterSpacing-sm) !important; }
.t-letterSpacingMd { letter-spacing: var(--letterSpacing-md) !important; }
.t-letterSpacingLg { letter-spacing: var(--letterSpacing-lg) !important; }
.t-letterSpacingXl { letter-spacing: var(--letterSpacing-xl) !important; }
Responsive CSS
@media (--viewport-sm) {
.t-sm-colorWhite { color: #FFF !important; }
.t-sm-colorBlack { color: #000 !important; }
.t-sm-colorGray90 { color: var(--gray-90) !important; }
.t-sm-colorGray80 { color: var(--gray-80) !important; }
.t-sm-colorGray70 { color: var(--gray-70) !important; }
.t-sm-colorGray60 { color: var(--gray-60) !important; }
.t-sm-colorGray50 { color: var(--gray-50) !important; }
.t-sm-colorGray40 { color: var(--gray-40) !important; }
.t-sm-colorGray30 { color: var(--gray-30) !important; }
.t-sm-colorGray20 { color: var(--gray-20) !important; }
.t-sm-colorGray10 { color: var(--gray-10) !important; }
.t-sm-colorGray5 { color: var(--gray-5) !important; }
.t-sm-colorPrimary { color: var(--primary) !important; }
.t-sm-colorPrimaryDark { color: var(--primary-dark) !important; }
.t-sm-colorPrimaryLight { color: var(--primary-light) !important; }
.t-sm-colorSecondary { color: var(--secondary) !important; }
.t-sm-colorSecondaryDark { color: var(--secondary-dark) !important; }
.t-sm-colorSecondaryLight { color: var(--secondary-light) !important; }
.t-sm-colorSuccess { color: var(--success) !important; }
.t-sm-colorSuccessDark { color: var(--success-dark) !important; }
.t-sm-colorSuccessLight { color: var(--success-light) !important; }
.t-sm-colorNotice { color: var(--notice) !important; }
.t-sm-colorNoticeDark { color: var(--notice-dark) !important; }
.t-sm-colorNoticeLight { color: var(--notice-light) !important; }
.t-sm-colorWarning { color: var(--warning) !important; }
.t-sm-colorWarningDark { color: var(--warning-dark) !important; }
.t-sm-colorWarningLight { color: var(--warning-light) !important; }
.t-sm-colorError { color: var(--error) !important; }
.t-sm-colorErrorDark { color: var(--error-dark) !important; }
.t-sm-colorErrorLight { color: var(--error-light) !important; }
.t-sm-decoNone { text-decoration: none !important; }
.t-sm-underline { text-decoration: underline !important; }
.t-sm-overline { text-decoration: overline !important; }
.t-sm-through { text-decoration: line-through !important; }
.t-sm-lowercase { text-transform: lowercase !important; }
.t-sm-uppercase { text-transform: uppercase !important; }
.t-sm-capitalize { text-transform: capitalize !important; }
.t-sm-nowrap { white-space: nowrap !important; }
.t-sm-pre { white-space: pre !important; }
.t-sm-normal { font-weight: normal !important; }
.t-sm-bold { font-weight: bold !important; }
.t-sm-bolder { font-weight: bolder !important; }
.t-sm-lighter { font-weight: lighter !important; }
.t-sm-italic { font-style: italic !important; }
.t-sm-enSans { font-family: var(--fontFamily-sansEn) !important; }
.t-sm-enSerif { font-family: var(--fontFamily-serifEn) !important;}
.t-sm-jaSans { font-family: var(--fontFamily-sansJa) !important; }
.t-sm-jaSerif { font-family: var(--fontFamily-serifJa) !important;}
.t-sm-monospace { font-family: var(--fontFamily-monospace) !important; }
.t-sm-fontGt { font-size: var(--fontSize-gt) !important; }
.t-sm-fontHg { font-size: var(--fontSize-hg) !important; }
.t-sm-fontXl { font-size: var(--fontSize-xl) !important; }
.t-sm-fontLg { font-size: var(--fontSize-lg) !important; }
.t-sm-fontMd { font-size: var(--fontSize-md) !important; }
.t-sm-fontSm { font-size: var(--fontSize-sm) !important; }
.t-sm-fontXs { font-size: var(--fontSize-xs) !important; }
.t-sm-fontTn { font-size: var(--fontSize-tn) !important; }
.t-sm-fontMi { font-size: var(--fontSize-mi) !important; }
.t-sm-lineHeightXs { line-height: var(--lineHeight-xs) !important; }
.t-sm-lineHeightSm { line-height: var(--lineHeight-sm) !important; }
.t-sm-lineHeightMd { line-height: var(--lineHeight-md) !important; }
.t-sm-lineHeightLg { line-height: var(--lineHeight-lg) !important; }
.t-sm-lineHeightXl { line-height: var(--lineHeight-xl) !important; }
.t-sm-letterSpacingXs { letter-spacing: var(--letterSpacing-xs) !important; }
.t-sm-letterSpacingSm { letter-spacing: var(--letterSpacing-sm) !important; }
.t-sm-letterSpacingMd { letter-spacing: var(--letterSpacing-md) !important; }
.t-sm-letterSpacingLg { letter-spacing: var(--letterSpacing-lg) !important; }
.t-sm-letterSpacingXl { letter-spacing: var(--letterSpacing-xl) !important; }
}
@media (--viewport-md) {
.t-md-colorWhite { color: #FFF !important; }
.t-md-colorBlack { color: #000 !important; }
.t-md-colorGray90 { color: var(--gray-90) !important; }
.t-md-colorGray80 { color: var(--gray-80) !important; }
.t-md-colorGray70 { color: var(--gray-70) !important; }
.t-md-colorGray60 { color: var(--gray-60) !important; }
.t-md-colorGray50 { color: var(--gray-50) !important; }
.t-md-colorGray40 { color: var(--gray-40) !important; }
.t-md-colorGray30 { color: var(--gray-30) !important; }
.t-md-colorGray20 { color: var(--gray-20) !important; }
.t-md-colorGray10 { color: var(--gray-10) !important; }
.t-md-colorGray5 { color: var(--gray-5) !important; }
.t-md-colorPrimary { color: var(--primary) !important; }
.t-md-colorPrimaryDark { color: var(--primary-dark) !important; }
.t-md-colorPrimaryLight { color: var(--primary-light) !important; }
.t-md-colorSecondary { color: var(--secondary) !important; }
.t-md-colorSecondaryDark { color: var(--secondary-dark) !important; }
.t-md-colorSecondaryLight { color: var(--secondary-light) !important; }
.t-md-colorSuccess { color: var(--success) !important; }
.t-md-colorSuccessDark { color: var(--success-dark) !important; }
.t-md-colorSuccessLight { color: var(--success-light) !important; }
.t-md-colorNotice { color: var(--notice) !important; }
.t-md-colorNoticeDark { color: var(--notice-dark) !important; }
.t-md-colorNoticeLight { color: var(--notice-light) !important; }
.t-md-colorWarning { color: var(--warning) !important; }
.t-md-colorWarningDark { color: var(--warning-dark) !important; }
.t-md-colorWarningLight { color: var(--warning-light) !important; }
.t-md-colorError { color: var(--error) !important; }
.t-md-colorErrorDark { color: var(--error-dark) !important; }
.t-md-colorErrorLight { color: var(--error-light) !important; }
.t-md-decoNone { text-decoration: none !important; }
.t-md-underline { text-decoration: underline !important; }
.t-md-overline { text-decoration: overline !important; }
.t-md-through { text-decoration: line-through !important; }
.t-md-lowercase { text-transform: lowercase !important; }
.t-md-uppercase { text-transform: uppercase !important; }
.t-md-capitalize { text-transform: capitalize !important; }
.t-md-nowrap { white-space: nowrap !important; }
.t-md-pre { white-space: pre !important; }
.t-md-normal { font-weight: normal !important; }
.t-md-bold { font-weight: bold !important; }
.t-md-bolder { font-weight: bolder !important; }
.t-md-lighter { font-weight: lighter !important; }
.t-md-italic { font-style: italic !important; }
.t-md-enSans { font-family: var(--fontFamily-sansEn) !important; }
.t-md-enSerif { font-family: var(--fontFamily-serifEn) !important;}
.t-md-jaSans { font-family: var(--fontFamily-sansJa) !important; }
.t-md-jaSerif { font-family: var(--fontFamily-serifJa) !important;}
.t-md-monospace { font-family: var(--fontFamily-monospace) !important; }
.t-md-fontGt { font-size: var(--fontSize-gt) !important; }
.t-md-fontHg { font-size: var(--fontSize-hg) !important; }
.t-md-fontXl { font-size: var(--fontSize-xl) !important; }
.t-md-fontLg { font-size: var(--fontSize-lg) !important; }
.t-md-fontMd { font-size: var(--fontSize-md) !important; }
.t-md-fontSm { font-size: var(--fontSize-sm) !important; }
.t-md-fontXs { font-size: var(--fontSize-xs) !important; }
.t-sm-fontTn { font-size: var(--fontSize-tn) !important; }
.t-sm-fontMi { font-size: var(--fontSize-mi) !important; }
.t-md-lineHeightXs { line-height: var(--lineHeight-xs) !important; }
.t-md-lineHeightSm { line-height: var(--lineHeight-sm) !important; }
.t-md-lineHeightMd { line-height: var(--lineHeight-md) !important; }
.t-md-lineHeightLg { line-height: var(--lineHeight-lg) !important; }
.t-md-lineHeightXl { line-height: var(--lineHeight-xl) !important; }
.t-md-letterSpacingXs { letter-spacing: var(--letterSpacing-xs) !important; }
.t-md-letterSpacingSm { letter-spacing: var(--letterSpacing-sm) !important; }
.t-md-letterSpacingMd { letter-spacing: var(--letterSpacing-md) !important; }
.t-md-letterSpacingLg { letter-spacing: var(--letterSpacing-lg) !important; }
.t-md-letterSpacingXl { letter-spacing: var(--letterSpacing-xl) !important; }
}
@media (--viewport-lg) {
.t-lg-colorWhite { color: #FFF !important; }
.t-lg-colorBlack { color: #000 !important; }
.t-lg-colorGray90 { color: var(--gray-90) !important; }
.t-lg-colorGray80 { color: var(--gray-80) !important; }
.t-lg-colorGray70 { color: var(--gray-70) !important; }
.t-lg-colorGray60 { color: var(--gray-60) !important; }
.t-lg-colorGray50 { color: var(--gray-50) !important; }
.t-lg-colorGray40 { color: var(--gray-40) !important; }
.t-lg-colorGray30 { color: var(--gray-30) !important; }
.t-lg-colorGray20 { color: var(--gray-20) !important; }
.t-lg-colorGray10 { color: var(--gray-10) !important; }
.t-lg-colorGray5 { color: var(--gray-5) !important; }
.t-lg-colorPrimary { color: var(--primary) !important; }
.t-lg-colorPrimaryDark { color: var(--primary-dark) !important; }
.t-lg-colorPrimaryLight { color: var(--primary-light) !important; }
.t-lg-colorSecondary { color: var(--secondary) !important; }
.t-lg-colorSecondaryDark { color: var(--secondary-dark) !important; }
.t-lg-colorSecondaryLight { color: var(--secondary-light) !important; }
.t-lg-colorSuccess { color: var(--success) !important; }
.t-lg-colorSuccessDark { color: var(--success-dark) !important; }
.t-lg-colorSuccessLight { color: var(--success-light) !important; }
.t-lg-colorNotice { color: var(--notice) !important; }
.t-lg-colorNoticeDark { color: var(--notice-dark) !important; }
.t-lg-colorNoticeLight { color: var(--notice-light) !important; }
.t-lg-colorWarning { color: var(--warning) !important; }
.t-lg-colorWarningDark { color: var(--warning-dark) !important; }
.t-lg-colorWarningLight { color: var(--warning-light) !important; }
.t-lg-colorError { color: var(--error) !important; }
.t-lg-colorErrorDark { color: var(--error-dark) !important; }
.t-lg-colorErrorLight { color: var(--error-light) !important; }
.t-lg-decoNone { text-decoration: none !important; }
.t-lg-underline { text-decoration: underline !important; }
.t-lg-overline { text-decoration: overline !important; }
.t-lg-through { text-decoration: line-through !important; }
.t-lg-lowercase { text-transform: lowercase !important; }
.t-lg-uppercase { text-transform: uppercase !important; }
.t-lg-capitalize { text-transform: capitalize !important; }
.t-lg-nowrap { white-space: nowrap !important; }
.t-lg-pre { white-space: pre !important; }
.t-lg-normal { font-weight: normal !important; }
.t-lg-bold { font-weight: bold !important; }
.t-lg-bolder { font-weight: bolder !important; }
.t-lg-lighter { font-weight: lighter !important; }
.t-lg-italic { font-style: italic !important; }
.t-lg-enSans { font-family: var(--fontFamily-sansEn) !important; }
.t-lg-enSerif { font-family: var(--fontFamily-serifEn) !important;}
.t-lg-jaSans { font-family: var(--fontFamily-sansJa) !important; }
.t-lg-jaSerif { font-family: var(--fontFamily-serifJa) !important;}
.t-lg-monospace { font-family: var(--fontFamily-monospace) !important; }
.t-lg-fontGt { font-size: var(--fontSize-gt) !important; }
.t-lg-fontHg { font-size: var(--fontSize-hg) !important; }
.t-lg-fontXl { font-size: var(--fontSize-xl) !important; }
.t-lg-fontLg { font-size: var(--fontSize-lg) !important; }
.t-lg-fontMd { font-size: var(--fontSize-md) !important; }
.t-lg-fontSm { font-size: var(--fontSize-sm) !important; }
.t-lg-fontXs { font-size: var(--fontSize-xs) !important; }
.t-sm-fontTn { font-size: var(--fontSize-tn) !important; }
.t-sm-fontMi { font-size: var(--fontSize-mi) !important; }
.t-lg-lineHeightXs { line-height: var(--lineHeight-xs) !important; }
.t-lg-lineHeightSm { line-height: var(--lineHeight-sm) !important; }
.t-lg-lineHeightMd { line-height: var(--lineHeight-md) !important; }
.t-lg-lineHeightLg { line-height: var(--lineHeight-lg) !important; }
.t-lg-lineHeightXl { line-height: var(--lineHeight-xl) !important; }
.t-lg-letterSpacingXs { letter-spacing: var(--letterSpacing-xs) !important; }
.t-lg-letterSpacingSm { letter-spacing: var(--letterSpacing-sm) !important; }
.t-lg-letterSpacingMd { letter-spacing: var(--letterSpacing-md) !important; }
.t-lg-letterSpacingLg { letter-spacing: var(--letterSpacing-lg) !important; }
.t-lg-letterSpacingXl { letter-spacing: var(--letterSpacing-xl) !important; }
}