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

add longform, color-text-link, and placeholder classes

Browse Source
This commit is contained in:
lindsaym-fa
2025-10-20 18:25:43 -04:00
parent 113cfbe52f
commit 01e58b5b57
1 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,66 +20,81 @@
line-height: var(--wa-line-height-condensed);
}
[class*='wa-longform'] {
font-family: var(--wa-font-family-longform);
font-weight: var(--wa-font-weight-body);
line-height: var(--wa-line-height-normal);
}
.wa-font-size-2xs,
.wa-body-2xs,
.wa-heading-2xs,
.wa-caption-2xs {
.wa-caption-2xs,
.wa-longform-2xs {
font-size: var(--wa-font-size-2xs);
}
.wa-font-size-xs,
.wa-body-xs,
.wa-heading-xs,
.wa-caption-xs {
.wa-caption-xs,
.wa-longform-xs {
font-size: var(--wa-font-size-xs);
}
.wa-font-size-s,
.wa-body-s,
.wa-heading-s,
.wa-caption-s {
.wa-caption-s,
.wa-longform-s {
font-size: var(--wa-font-size-s);
}
.wa-font-size-m,
.wa-body-m,
.wa-heading-m,
.wa-caption-m {
.wa-caption-m,
.wa-longform-m {
font-size: var(--wa-font-size-m);
}
.wa-font-size-l,
.wa-body-l,
.wa-heading-l,
.wa-caption-l {
.wa-caption-l,
.wa-longform-l {
font-size: var(--wa-font-size-l);
}
.wa-font-size-xl,
.wa-body-xl,
.wa-heading-xl,
.wa-caption-xl {
.wa-caption-xl,
.wa-longform-xl {
font-size: var(--wa-font-size-xl);
}
.wa-font-size-2xl,
.wa-body-2xl,
.wa-heading-2xl,
.wa-caption-2xl {
.wa-caption-2xl,
.wa-longform-2xl {
font-size: var(--wa-font-size-2xl);
}
.wa-font-size-3xl,
.wa-body-3xl,
.wa-heading-3xl,
.wa-caption-3xl {
.wa-caption-3xl,
.wa-longform-3xl {
font-size: var(--wa-font-size-3xl);
}
.wa-font-size-4xl,
.wa-body-4xl,
.wa-heading-4xl,
.wa-caption-4xl {
.wa-caption-4xl,
.wa-longform-4xl {
font-size: var(--wa-font-size-4xl);
}
@@ -107,6 +122,10 @@
color: var(--wa-color-text-quiet);
}
.wa-color-text-link {
color: var(--wa-color-text-link);
}
.wa-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
@@ -142,7 +161,7 @@
}
/* #endregion */
/* #region Lists */
/* #region Lists ~~~~~~~ */
.wa-list-plain:is(ol, ul) {
list-style: none;
padding-inline-start: 0;
@@ -166,11 +185,17 @@
line-height: var(--wa-form-control-value-line-height);
}
.wa-form-control-placeholder {
color: var(--wa-form-control-placeholder-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);
line-height: var(--wa-form-control-hint-line-height);
}
/* #endregion */
}