scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use typography variables instead

Browse Source 
explicit since composing is not allowed in nested selectors
This commit is contained in:
Christian Andolf
2025-06-11 16:20:23 +02:00
parent f6be4f275e
commit 7ee711bb43
1 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/design-system/lib/components/Label/label.module.css
View File

@@ -1,21 +1,40 @@
.label { .label {
composes: Body-Paragraph-mdRegular from '../Typography/typography.module.css'; font-family:
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
font-size: var(--Body-Paragraph-Size);
font-weight: var(--Body-Paragraph-Font-weight);
letter-spacing: var(--Body-Paragraph-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
transition: font-size 100ms ease; transition: font-size 100ms ease;
text-align: left; text-align: left;
color: var(--Text-Interactive-Placeholder); color: var(--Text-Interactive-Placeholder);
user-select: none; user-select: none;
}
&.small { .small {
display: block; font-family: var(--Label-Font-family), var(--Label-Font-fallback);
font-size: 12px; font-size: var(--Label-Size);
} font-weight: var(--Label-Font-weight);
&.regular { letter-spacing: var(--Label-Letter-spacing);
font-size: 16px; text-transform: unset;
} line-height: 1.5;
text-decoration: none;
} }
.discreet { .discreet {
composes: Body-Supporting-text-caption-smBold from '../Typography/typography.module.css'; font-family:
var(--Body-Supporting-text-Font-family),
var(--Body-Supporting-text-Font-fallback);
font-size: var(--Body-Supporting-text-Size);
font-weight: var(--Body-Supporting-text-Font-weight-2);
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
text-transform: unset;
line-height: 1.4;
text-decoration: none;
color: var(--Text-Default); color: var(--Text-Default);
order: unset; order: unset;
} }
@@ -31,7 +50,14 @@ textarea:focus,
textarea:placeholder-shown, textarea:placeholder-shown,
textarea[value]:not([value='']) { textarea[value]:not([value='']) {
& ~ .label { & ~ .label {
font-size: 12px; font-family: var(--Label-Font-family), var(--Label-Font-fallback);
font-size: var(--Label-Size);
font-weight: var(--Label-Font-weight);
letter-spacing: var(--Label-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
margin-bottom: var(--Space-x05); margin-bottom: var(--Space-x05);
} }
} }
@@ -45,7 +71,14 @@ textarea:disabled {
@media (hover: hover) { @media (hover: hover) {
input:active:not(:disabled) ~ .label { input:active:not(:disabled) ~ .label {
font-size: 12px; font-family: var(--Label-Font-family), var(--Label-Font-fallback);
font-size: var(--Label-Size);
font-weight: var(--Label-Font-weight);
letter-spacing: var(--Label-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
margin-bottom: var(--Space-x05); margin-bottom: var(--Space-x05);
} }
} }