js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

initial take on text utility improvements

Browse Source
This commit is contained in:
lindsaym-fa
2025-10-03 18:31:57 -04:00
parent 334e3361b4
commit be3dbd6612
1 changed files with 89 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
packages/webawesome/src/styles/utilities/text.css
View File

@@ -1,106 +1,114 @@
@layer wa-utilities {
.wa-heading-xs,
.wa-heading-s,
.wa-heading-m,
.wa-heading-l,
.wa-heading-xl,
.wa-heading-2xl,
.wa-heading-3xl {
[class*='wa-body'] {
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-normal);
}
[class*='wa-heading'] {
font-family: var(--wa-font-family-heading);
font-weight: var(--wa-font-weight-heading);
line-height: var(--wa-line-height-condensed);
text-wrap: balance;
}
.wa-heading-xs {
font-size: var(--wa-font-size-s);
}
.wa-heading-s {
font-size: var(--wa-font-size-m);
}
.wa-heading-m {
font-size: var(--wa-font-size-l);
}
.wa-heading-l {
font-size: var(--wa-font-size-xl);
}
.wa-heading-xl {
font-size: var(--wa-font-size-2xl);
}
.wa-heading-2xl {
font-size: var(--wa-font-size-3xl);
}
.wa-heading-3xl {
font-size: var(--wa-font-size-4xl);
}
.wa-body-xs,
.wa-body-s,
.wa-body-m,
.wa-body-l,
.wa-body-xl {
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-normal);
}
.wa-body-xs {
font-size: var(--wa-font-size-xs);
}
.wa-body-s {
font-size: var(--wa-font-size-s);
}
.wa-body-m {
font-size: var(--wa-font-size-m);
}
.wa-body-l {
font-size: var(--wa-font-size-l);
}
.wa-body-xl {
font-size: var(--wa-font-size-xl);
}
.wa-caption-xs,
.wa-caption-s,
.wa-caption-m,
.wa-caption-l,
.wa-caption-xl {
color: var(--wa-color-text-quiet);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-condensed);
}
.wa-caption-xs {
.wa-font-size-2xs,
.wa-body-2xs,
.wa-heading-2xs {
font-size: var(--wa-font-size-2xs);
}
.wa-caption-s {
.wa-font-size-xs,
.wa-body-xs,
.wa-heading-xs {
font-size: var(--wa-font-size-xs);
}
.wa-caption-m {
.wa-font-size-s,
.wa-body-s,
.wa-heading-s {
font-size: var(--wa-font-size-s);
}
.wa-caption-l {
.wa-font-size-m,
.wa-body-m,
.wa-heading-m {
font-size: var(--wa-font-size-m);
}
.wa-caption-xl {
.wa-font-size-l,
.wa-body-l,
.wa-heading-l {
font-size: var(--wa-font-size-l);
}
.wa-font-size-xl,
.wa-body-xl,
.wa-heading-xl {
font-size: var(--wa-font-size-xl);
}
.wa-font-size-2xl,
.wa-body-2xl,
.wa-heading-2xl {
font-size: var(--wa-font-size-2xl);
}
.wa-font-size-3xl,
.wa-body-3xl,
.wa-heading-3xl {
font-size: var(--wa-font-size-3xl);
}
.wa-font-size-4xl,
.wa-body-4xl,
.wa-heading-4xl {
font-size: var(--wa-font-size-4xl);
}
.wa-font-weight-light {
font-weight: var(--wa-font-weight-light);
}
.wa-font-weight-normal {
font-weight: var(--wa-font-weight-normal);
}
.wa-font-weight-semibold {
font-weight: var(--wa-font-weight-semibold);
}
.wa-font-weight-bold {
font-weight: var(--wa-font-weight-bold);
}
.wa-color-text-normal {
color: var(--wa-color-text-normal);
}
.wa-color-text-quiet {
color: var(--wa-color-text-quiet);
}
.wa-form-control-label {
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
}
.wa-form-control-value {
color: var(--wa-form-control-value-color);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
}
.wa-form-control-hint {
color: var(--wa-form-control-hint-color);
font-weight: var(--wa-form-control-hint-font-weight);
font-size: var(--wa-font-size-smaller);
line-height: var(--wa-form-control-label-line-height);
}
.wa-link {
color: var(--wa-color-text-link);
text-decoration: var(--wa-link-decoration-default);