diff --git a/components/content/Text/Text.css b/components/content/Text/Text.css new file mode 100644 index 0000000..42165e5 --- /dev/null +++ b/components/content/Text/Text.css @@ -0,0 +1,188 @@ +/* Font */ + +.diamond-text-font-body { + font-size: var(--diamond-font-size-base); + font-weight: var(--diamond-font-weight-base); + line-height: var(--diamond-font-line-height); + text-wrap: pretty; +} + +.diamond-text-font-heading, +.diamond-text-font-h1, +.diamond-text-font-h2, +.diamond-text-font-h3, +.diamond-text-font-h4 { + font-weight: var(--diamond-font-weight-bold); + line-height: var(--diamond-font-line-height-sm); + text-wrap: balance; +} + +.diamond-text-font-h1 { + font-size: var(--diamond-font-size-h1); +} + +.diamond-text-font-h2 { + font-size: var(--diamond-font-size-h2); +} + +.diamond-text-font-h3 { + font-size: var(--diamond-font-size-h3); +} + +.diamond-text-font-h4 { + font-size: var(--diamond-font-size-h4); +} + +/* Size */ + +.diamond-text-size-default { + font-size: var(--diamond-font-size-default); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-xs { + font-size: var(--diamond-font-size-xs); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-sm { + font-size: var(--diamond-font-size-sm); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-base { + font-size: var(--diamond-font-size-base); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-md { + font-size: var(--diamond-font-size-md); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-lg { + font-size: var(--diamond-font-size-lg); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-xl { + font-size: var(--diamond-font-size-xl); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-xxl { + font-size: var(--diamond-font-size-xxl); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-xxxl { + font-size: var(--diamond-font-size-xxxl); + line-height: var(--diamond-font-line-height); +} + +.diamond-text-size-h1 { + font-size: var(--diamond-font-size-h1); + line-height: var(--diamond-font-line-height-sm); +} + +.diamond-text-size-h2 { + font-size: var(--diamond-font-size-h2); + line-height: var(--diamond-font-line-height-sm); +} + +.diamond-text-size-h3 { + font-size: var(--diamond-font-size-h3); + line-height: var(--diamond-font-line-height-sm); +} + +.diamond-text-size-h4 { + font-size: var(--diamond-font-size-h4); + line-height: var(--diamond-font-line-height-sm); +} + +/* Weight */ + +.diamond-text-weight-light { + font-weight: var(--diamond-font-weight-light); +} + +.diamond-text-weight-medium { + font-weight: var(--diamond-font-weight-medium); +} + +.diamond-text-weight-bold { + font-weight: var(--diamond-font-weight-bold); +} + +.diamond-text-weight-black { + font-weight: var(--diamond-font-weight-black); +} + +.diamond-text-weight-body { + font-weight: var(--diamond-font-weight-base); +} + +.diamond-text-weight-heading { + font-weight: var(--diamond-font-weight-bold); +} + +/* Alignment */ + +.diamond-text-align-left { + text-align: left; +} + +.diamond-text-align-center { + text-align: center; +} + +.diamond-text-align-right { + text-align: right; +} + +/* Wrap */ + +.diamond-text-wrap-balance { + text-wrap: balance; +} + +.diamond-text-wrap-pretty { + text-wrap: pretty; +} + +/* Truncate */ + +.diamond-text-truncate, +.diamond-text-line-limit-1 { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Line limit */ +.diamond-text-line-limit-2, +.diamond-text-line-limit-3, +.diamond-text-line-limit-4 { + -webkit-box-orient: vertical; + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + overflow: hidden; +} + +.diamond-text-line-limit-2 { + -webkit-line-clamp: 2; +} + +.diamond-text-line-limit-3 { + -webkit-line-clamp: 3; +} + +.diamond-text-line-limit-4 { + -webkit-line-clamp: 4; +} + +/* Decoration */ + +.diamond-text-decoration-none { + text-decoration: none; +}