Skip to content

Commit 8958cb3

Browse files
thorbrinkthorbrink
committed
fix: add missing tokens
1 parent c488e85 commit 8958cb3

File tree

3 files changed

+23
-25
lines changed

3 files changed

+23
-25
lines changed

‎source/components/field/style.scss‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,10 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
1818

1919
/* Component */
2020
.#{$_} {
21-
--#{$_}--base: var(--base);
2221
--#{$_}--border: #{tokens.use($_, "border-width", 1)} solid #{tokens.get($_, "color--surface-border")};
2322
--#{$_}--background-color: #{tokens.get($_, "color--surface-alt")};
2423
--#{$_}--contrast-color: #{tokens.get($_, "color--surface-contrast")};
25-
--#{$_}--height: calc(var(--base) * 6);
24+
--#{$_}--height: tokens.use($_, "base", 6);
2625
--#{$_}--shadow: #{tokens.use($_, "shadow", 1)};
2726
--#{$_}--shadow-hover: #{tokens.use($_, "shadow", 1.5)};
2827
--#{$_}--height-computed: calc(var(--#{$_}--height) - #{tokens.get($_, "border-width")} * 2);
@@ -78,7 +77,7 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
7877
flex-wrap: nowrap;
7978
align-items: center;
8079
width: 100%;
81-
min-width: calc(var(--#{$_}--base) * 10);
80+
min-width: calc(tokens.use($_, "base", 10));
8281
font-size: 0.95rem;
8382
line-height: calc(var(--base) * 2);
8483
border: var(--#{$_}--border);
@@ -125,7 +124,7 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
125124

126125
&[list] {
127126
cursor: text;
128-
padding-right: calc(var(--#{$_}--base) * 7);
127+
padding-right: tokens.use($_, "base", 7);
129128

130129
&::-webkit-calendar-picker-indicator {
131130
opacity: 0;
@@ -145,11 +144,11 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
145144
top: 0;
146145
right: 0;
147146
height: 100%;
148-
width: calc(var(--#{$_}--base) * 5);
147+
width: calc(tokens.use($_, "base", 5));
149148
border-left: tokens.use($_, "border-width", 1) solid tokens.get($_, "color--surface-border");
150149
background-image: linear-gradient(to bottom,
151-
color-mix(in srgb, tokens.get($_, "color--surface-border") 14%, var(--#{$_}--background-color)),
152-
color-mix(in srgb, tokens.get($_, "color--surface-border") 8%, var(--#{$_}--background-color)));
150+
color-mix(in srgb, tokens.get($_, "color--surface-border") 14%, var(--#{$_}--background-color)),
151+
color-mix(in srgb, tokens.get($_, "color--surface-border") 8%, var(--#{$_}--background-color)));
153152
border-top-right-radius: tokens.use($_, "border-radius");
154153
border-bottom-right-radius: tokens.use($_, "border-radius");
155154
pointer-events: none;
@@ -159,7 +158,7 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
159158
content: "";
160159
position: absolute;
161160
top: 50%;
162-
right: calc(var(--#{$_}--base) * 2);
161+
right: calc(tokens.use($_, "base", 2));
163162
width: 0.55em;
164163
height: 0.55em;
165164
border-right: 2px solid tokens.get($_, "color--primary");
@@ -266,7 +265,7 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
266265

267266
.#{$_}__inner,
268267
.#{$_}__inner input {
269-
border-radius: calc(var(--#{$_}--base) * 3);
268+
border-radius: calc(tokens.use($_, "base", 3));
270269
border: none;
271270

272271
input::placeholder {
@@ -275,7 +274,7 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
275274
}
276275

277276
.#{$_}__label {
278-
margin-left: calc(var(--#{$_}--base) * 2);
277+
margin-left: calc(tokens.use($_, "base", 2));
279278
}
280279

281280
&.#{$_}--rounded-border {
@@ -286,29 +285,29 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
286285

287286
input:focus+.#{$_}_focus-styler,
288287
textarea:focus+.#{$_}_focus-styler {
289-
border-radius: calc(var(--#{$_}--base) * 3);
288+
border-radius: calc(tokens.use($_, "base", 3));
290289
}
291290
}
292291

293292
/* Size modifiers */
294293
&.#{$_}--sm {
295294
font-size: 0.775rem;
296-
line-height: calc(var(--base) * 1.5);
295+
line-height: calc(tokens.use($_, "base", 1.5));
297296

298297
#{$fields} {
299298
padding: tokens.use($_, "space");
300-
height: calc(var(--#{$_}--base) * 4.5);
299+
height: calc(tokens.use($_, "base", 4.5));
301300
}
302301

303302
&.#{$_}--borderless {
304303
#{$fields} {
305-
height: calc(var(--#{$_}--base) * 4.5);
304+
height: calc(tokens.use($_, "base", 4.5));
306305
}
307306
}
308307

309308
textarea {
310309
padding: tokens.use($_, "space");
311-
min-height: calc(var(--#{$_}--base) * 4.5);
310+
min-height: calc(tokens.use($_, "base", 4.5));
312311
}
313312

314313
.#{$_}__icon,
@@ -354,18 +353,18 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
354353

355354
#{$fields} {
356355
padding: tokens.use($_, "space", 2.5);
357-
height: calc(var(--#{$_}--base) * 8);
356+
height: calc(tokens.use($_, "base", 8));
358357
}
359358

360359
&.#{$_}--borderless {
361360
#{$fields} {
362-
height: calc(var(--#{$_}--base) * 8);
361+
height: calc(tokens.use($_, "base", 8));
363362
}
364363
}
365364

366365
textarea {
367366
padding: tokens.use($_, "space", 2.5);
368-
min-height: calc(var(--#{$_}--base) * 8);
367+
min-height: calc(tokens.use($_, "base", 8));
369368
}
370369

371370
.#{$_}__icon,
@@ -449,7 +448,7 @@ $fields: "input, input[type=" color"], input[type=" text"], input[type=" search"
449448
border-radius: tokens.use($_, "border-radius");
450449
corner-shape: tokens.get($_, "corner-shape");
451450
box-shadow: var(--#{$_}--shadow);
452-
max-height: calc(var(--#{$_}--base) * 28);
451+
max-height: calc(tokens.use($_, "base", 28));
453452
overflow-y: auto;
454453
}
455454

‎source/components/header/style.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ $_: "c-header";
99

1010
/* Component */
1111
.#{$_} {
12-
--#{$_}--base: var(--base);
13-
--#{$_}--logotype-height: calc(6 * var(--base));
12+
--#{$_}--logotype-height: tokens.use($_, "base", 6);
1413
--#{$_}--background-color: #{tokens.get($_, "color--surface")};
1514
--#{$_}--color: #{tokens.get($_, "color--surface-contrast")};
1615
--#{$_}--border-color: #{tokens.get($_, "color--primary")};
@@ -65,7 +64,7 @@ $_: "c-header";
6564
}
6665

6766
&.#{$_}--accented {
68-
border-bottom: var(--#{$_}--base) solid var(--#{$_}--border-color);
67+
border-bottom: tokens.use($_, "base", 1) solid var(--#{$_}--border-color);
6968
}
7069

7170
&.#{$_}--text-primary *,

‎source/components/image/style.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ $_modal: "c-modal--gallery";
1414
.#{$_} {
1515
--#{$_}--base: var(--base);
1616
--#{$_}--font-size-caption: var(--font-size-caption, #{tokens.get($_, 'font-size-90')});
17-
--#{$_}--line-height-caption: var(--line-height-caption, var(--line-height-base));
18-
--#{$_}--font-weight-bold: var(--font-weight-bold);
19-
--#{$_}--font-family-bold: var(--font-family-base);
17+
--#{$_}--line-height-caption: tokens.get($_, "line-height-base");
18+
--#{$_}--font-weight-bold: tokens.get($_, "font-weight-bold");
19+
--#{$_}--font-family-bold: tokens.get($_, "font-family-bold");
2020
--#{$_}--border: #{tokens.use($_, "border-width", 1)} solid #{tokens.get($_, "color--surface-border")};
2121
line-height: 0;
2222
position: relative;

0 commit comments

Comments
 (0)