Skip to content

Commit d9fbdde

Browse files
mdomdo
committed
Tons of tokens updates, also some validation improvements
1 parent b2adbe0 commit d9fbdde

18 files changed

Lines changed: 226 additions & 409 deletions

‎scss/_root.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@ $root-tokens: (
9494
--focus-ring: var(--focus-ring-width) solid var(--focus-ring-color),
9595
// scss-docs-end root-focus-variables
9696

97+
--input-bg: var(--bg-body),
98+
--input-color: var(--fg-body),
99+
97100
// scss-docs-start root-form-control-variables
98101
--btn-input-min-height: 2.375rem,
99102
--btn-input-padding-y: .375rem,

‎scss/_theme.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ $new-theme-colors: (
6868
"bg-subtle": light-dark(var(--blue-100), var(--blue-900)),
6969
"bg-muted": light-dark(var(--blue-200), var(--blue-800)),
7070
"border": light-dark(var(--blue-300), var(--blue-600)),
71-
"focus-ring": color-mix(in oklch, light-dark(var(--blue-500), var(--blue-400)) 50%, var(--bg-body)),
71+
"focus-ring": light-dark(color-mix(in oklch, var(--blue-500) 50%, var(--bg-body)), color-mix(in oklch, var(--blue-500) 75%, var(--bg-body))),
7272
"contrast": var(--white)
7373
),
7474
"accent": (
@@ -79,7 +79,7 @@ $new-theme-colors: (
7979
"bg-subtle": light-dark(var(--indigo-100), var(--indigo-900)),
8080
"bg-muted": light-dark(var(--indigo-200), var(--indigo-800)),
8181
"border": light-dark(var(--indigo-300), var(--indigo-600)),
82-
"focus-ring": color-mix(in oklch, light-dark(var(--indigo-500), var(--indigo-400)) 50%, var(--bg-body)),
82+
"focus-ring": light-dark(color-mix(in oklch, var(--indigo-500) 50%, var(--bg-body)), color-mix(in oklch, var(--indigo-500) 75%, var(--bg-body))),
8383
"contrast": var(--white)
8484
),
8585
"success": (
@@ -90,7 +90,7 @@ $new-theme-colors: (
9090
"bg-subtle": light-dark(var(--green-100), var(--green-900)),
9191
"bg-muted": light-dark(var(--green-200), var(--green-800)),
9292
"border": light-dark(var(--green-300), var(--green-600)),
93-
"focus-ring": color-mix(in oklch, light-dark(var(--green-500), var(--green-400)) 50%, var(--bg-body)),
93+
"focus-ring": light-dark(color-mix(in oklch, var(--green-500) 50%, var(--bg-body)), color-mix(in oklch, var(--green-500) 75%, var(--bg-body))),
9494
"contrast": var(--white)
9595
),
9696
"danger": (
@@ -101,7 +101,7 @@ $new-theme-colors: (
101101
"bg-subtle": light-dark(var(--red-100), var(--red-900)),
102102
"bg-muted": light-dark(var(--red-200), var(--red-800)),
103103
"border": light-dark(var(--red-300), var(--red-600)),
104-
"focus-ring": color-mix(in oklch, light-dark(var(--red-500), var(--red-400)) 50%, var(--bg-body)),
104+
"focus-ring": light-dark(color-mix(in oklch, var(--red-500) 50%, var(--bg-body)), color-mix(in oklch, var(--red-500) 75%, var(--bg-body))),
105105
"contrast": var(--white)
106106
),
107107
"warning": (
@@ -112,7 +112,7 @@ $new-theme-colors: (
112112
"bg-subtle": light-dark(var(--yellow-100), var(--yellow-900)),
113113
"bg-muted": light-dark(var(--yellow-200), var(--yellow-800)),
114114
"border": light-dark(var(--yellow-300), var(--yellow-600)),
115-
"focus-ring": color-mix(in oklch, light-dark(var(--yellow-500), var(--yellow-400)) 50%, var(--bg-body)),
115+
"focus-ring": light-dark(color-mix(in oklch, var(--yellow-500) 50%, var(--bg-body)), color-mix(in oklch, var(--yellow-400) 85%, var(--bg-body))),
116116
"contrast": var(--gray-900)
117117
),
118118
"info": (
@@ -123,7 +123,7 @@ $new-theme-colors: (
123123
"bg-subtle": light-dark(var(--cyan-100), var(--cyan-900)),
124124
"bg-muted": light-dark(var(--cyan-200), var(--cyan-800)),
125125
"border": light-dark(var(--cyan-300), var(--cyan-600)),
126-
"focus-ring": color-mix(in oklch, light-dark(var(--cyan-500), var(--cyan-400)) 50%, var(--bg-body)),
126+
"focus-ring": light-dark(color-mix(in oklch, var(--cyan-500) 50%, var(--bg-body)), color-mix(in oklch, var(--cyan-500) 75%, var(--bg-body))),
127127
"contrast": var(--gray-900)
128128
),
129129
"inverse": (

‎scss/_variables.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,13 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
126126
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
127127
// scss-docs-end box-shadow-variables
128128

129-
// scss-docs-start focus-ring-variables
130-
$focus-ring-width: .25rem !default;
131-
$focus-ring-opacity: .25 !default;
132-
$focus-ring-color: var(--primary-focus-ring) !default;
133-
$focus-ring-blur: 0 !default;
134-
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
135-
// scss-docs-end focus-ring-variables
129+
// // scss-docs-start focus-ring-variables
130+
// $focus-ring-width: .25rem !default;
131+
// $focus-ring-opacity: .25 !default;
132+
// $focus-ring-color: var(--primary-focus-ring) !default;
133+
// $focus-ring-blur: 0 !default;
134+
// $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
135+
// // scss-docs-end focus-ring-variables
136136

137137
// $component-active-bg: var(--primary-bg) !default;
138138

‎scss/buttons/_close.scss‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,33 @@
55
@use "../mixins/color-mode" as *;
66
@use "../mixins/focus-ring" as *;
77

8-
// scss-docs-start close-variables
9-
$btn-close-size: 1.25rem !default;
10-
$btn-close-color: var(--fg-body) !default;
11-
$btn-close-opacity: .5 !default;
12-
$btn-close-hover-opacity: .75 !default;
13-
$btn-close-focus-opacity: .85 !default;
14-
$btn-close-disabled-opacity: .25 !default;
15-
// scss-docs-end close-variables
8+
// scss-docs-start btn-close-tokens
9+
$btn-close-tokens: (
10+
--btn-close-size: 1.25rem,
11+
--btn-close-color: var(--fg-body),
12+
--btn-close-opacity: .5,
13+
--btn-close-hover-opacity: .75,
14+
--btn-close-focus-opacity: .85,
15+
--btn-close-disabled-opacity: .25,
16+
) !default;
17+
// scss-docs-end btn-close-tokens
1618

17-
// Transparent background and border properties included for button version.
1819
// iOS requires the button element instead of an anchor tag.
1920
// If you want the anchor version, it requires `href="#"`.
2021
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
2122

2223
@layer components {
2324
.btn-close {
24-
// scss-docs-start close-css-vars
25-
--btn-close-size: #{$btn-close-size};
26-
--btn-close-color: #{$btn-close-color};
27-
--btn-close-opacity: #{$btn-close-opacity};
28-
--btn-close-hover-opacity: #{$btn-close-hover-opacity};
29-
--btn-close-focus-opacity: #{$btn-close-focus-opacity};
30-
--btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
31-
// scss-docs-end close-css-vars
25+
@each $prop, $value in $btn-close-tokens {
26+
#{$prop}: #{$value};
27+
}
3228

3329
box-sizing: content-box;
3430
width: var(--btn-close-size);
3531
height: var(--btn-close-size);
3632
padding: 0;
3733
color: var(--btn-close-color);
38-
background: transparent;
34+
background: transparent; // for button elements
3935
border: 0; // for button elements
4036
@include border-radius(var(--border-radius-sm));
4137
opacity: var(--btn-close-opacity);
@@ -54,9 +50,9 @@ $btn-close-disabled-opacity: .25 !default;
5450
opacity: var(--btn-close-hover-opacity);
5551
}
5652

57-
&:focus {
58-
@include focus-ring();
53+
&:focus-visible {
5954
opacity: var(--btn-close-focus-opacity);
55+
@include focus-ring();
6056
}
6157

6258
&:disabled,

‎scss/forms/_chip-input.scss‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,25 @@
77
@use "../mixins/transition" as *;
88
@use "form-variables" as *;
99

10-
// scss-docs-start chip-input-variables
11-
$chip-input-gap: .375rem !default;
12-
$chip-input-padding-y: .75rem !default;
13-
$chip-input-padding-x: .75rem !default;
14-
$chip-input-chip-padding-y: .75rem !default;
15-
$chip-input-chip-padding-x: .5rem !default;
16-
$chip-input-ghost-min-width: 5rem !default;
17-
// scss-docs-end chip-input-variables
10+
// scss-docs-start chip-input-tokens
11+
$chip-input-tokens: (
12+
--chip-input-padding-y: .75rem,
13+
--chip-input-padding-x: .75rem,
14+
--chip-input-gap: .375rem,
15+
--chip-input-ghost-min-width: 5rem,
16+
--control-color: var(--fg-body),
17+
--control-bg: var(--bg-body),
18+
--control-border-width: var(--border-width),
19+
--control-border-color: var(--border-color),
20+
--control-border-radius: var(--border-radius),
21+
) !default;
22+
// scss-docs-end chip-input-tokens
1823

1924
@layer forms {
2025
.chip-input {
21-
// Inherit form-control CSS variables for sizing
22-
// --control-min-height: #{$control-min-height};
23-
--chip-input-padding-y: #{$chip-input-padding-y};
24-
--chip-input-padding-x: #{$chip-input-padding-x};
25-
--control-padding-x: #{$control-padding-x};
26-
--control-color: #{$control-color};
27-
--control-bg: #{$control-bg};
28-
--control-border-width: #{$control-border-width};
29-
--control-border-color: #{$control-border-color};
30-
--control-border-radius: #{$control-border-radius};
31-
32-
// Chip input specific
33-
--chip-input-gap: #{$chip-input-gap};
34-
// --chip-input-chip-padding-y: #{$chip-input-chip-padding-y};
35-
// --chip-input-chip-padding-x: #{$chip-input-chip-padding-x};
36-
// --chip-input-chip-font-size: #{$chip-input-chip-font-size};
37-
--chip-input-ghost-min-width: #{$chip-input-ghost-min-width};
26+
@each $prop, $value in $chip-input-tokens {
27+
#{$prop}: #{$value};
28+
}
3829

3930
// Flexbox wrapping layout
4031
display: flex;
@@ -51,7 +42,7 @@ $chip-input-ghost-min-width: 5rem !default;
5142
// Focus state when ghost input is focused
5243
&:focus-within {
5344
--focus-ring-offset: -1px;
54-
border-color: $input-focus-border-color;
45+
border-color: var(--focus-ring-color);
5546
@include focus-ring(true);
5647
}
5748

@@ -65,7 +56,7 @@ $chip-input-ghost-min-width: 5rem !default;
6556
// Disabled state
6657
&.disabled,
6758
&:has(.form-ghost:disabled) {
68-
background-color: $input-disabled-bg;
59+
background-color: var(--bg-2);
6960
opacity: 1;
7061

7162
> .chip {

‎scss/forms/_floating-labels.scss‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
// scss-docs-start form-floating-tokens
1010
$form-floating-tokens: (
11-
--form-floating-height: calc(3.5rem + #{$input-height-border}),
11+
--form-floating-height: calc(3.5rem + (var(--border-width) * 2)),
1212
--form-floating-line-height: 1.25,
1313
--form-floating-padding-x: var(--btn-input-padding-x),
1414
--form-floating-padding-y: 1rem,
@@ -24,20 +24,6 @@ $form-floating-tokens: (
2424
) !default;
2525
// scss-docs-end form-floating-tokens
2626

27-
// // scss-docs-start form-floating-variables
28-
// $form-floating-height: calc(3.5rem + #{$input-height-border}) !default;
29-
// $form-floating-line-height: 1.25 !default;
30-
// $form-floating-padding-x: $input-padding-x !default;
31-
// $form-floating-padding-y: 1rem !default;
32-
// $form-floating-input-padding-t: 1.625rem !default;
33-
// $form-floating-input-padding-b: .625rem !default;
34-
// $form-floating-label-height: 1.5em !default;
35-
// $form-floating-label-opacity: .65 !default;
36-
// $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
37-
// $form-floating-label-disabled-color: var(--gray-600) !default;
38-
// $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
39-
// // scss-docs-end form-floating-variables
40-
4127
@layer forms {
4228
.form-floating {
4329
@each $token, $value in $form-floating-tokens {
@@ -112,8 +98,8 @@ $form-floating-tokens: (
11298
z-index: -1;
11399
height: var(--form-floating-label-height);
114100
content: "";
115-
background-color: $input-bg;
116-
@include border-radius($input-border-radius);
101+
background-color: var(--input-bg);
102+
@include border-radius(var(--btn-input-border-radius));
117103
}
118104
}
119105
> textarea:disabled ~ label::after {

‎scss/forms/_form-adorn.scss‎

Lines changed: 15 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,31 @@
66
@use "../mixins/transition" as *;
77
@use "form-variables" as *;
88

9-
// scss-docs-start form-adorn-variables
10-
$form-adorn-gap: .375rem !default;
11-
$form-adorn-icon-size: 1rem !default;
12-
$form-adorn-icon-color: var(--fg-2) !default;
13-
// scss-docs-end form-adorn-variables
9+
// scss-docs-start form-adorn-tokens
10+
$form-adorn-tokens: (
11+
--form-adorn-gap: .375rem,
12+
--form-adorn-icon-size: 1rem,
13+
--form-adorn-icon-color: var(--fg-2),
14+
) !default;
15+
// scss-docs-end form-adorn-tokens
1416

1517
@layer forms {
1618
.form-adorn {
17-
// Inherit form-control CSS variables for sizing
18-
--control-min-height: #{$control-min-height};
19-
--control-padding-y: #{$control-padding-y};
20-
--control-padding-x: #{$control-padding-x};
21-
--control-font-size: #{$control-font-size};
22-
--control-line-height: #{$control-line-height};
23-
--control-color: #{$control-color};
24-
--control-bg: #{$control-bg};
25-
--control-border-width: #{$control-border-width};
26-
--control-border-color: #{$control-border-color};
27-
--control-border-radius: #{$control-border-radius};
28-
29-
// Adorn-specific variables
30-
--form-adorn-gap: #{$form-adorn-gap};
31-
--form-adorn-icon-size: #{$form-adorn-icon-size};
32-
--form-adorn-icon-color: #{$form-adorn-icon-color};
19+
@each $prop, $value in $form-adorn-tokens {
20+
#{$prop}: #{$value};
21+
}
3322

34-
// Flexbox layout
35-
display: flex;
3623
gap: var(--form-adorn-gap);
3724
align-items: center;
3825

39-
// Replicate .form-control styles on the wrapper
40-
min-height: var(--control-min-height);
41-
padding: var(--control-padding-y) var(--control-padding-x);
42-
font-size: var(--control-font-size);
43-
line-height: var(--control-line-height);
44-
color: var(--control-color);
45-
background-color: var(--control-bg);
46-
background-clip: padding-box;
47-
border: var(--control-border-width) solid var(--control-border-color);
48-
@include border-radius(var(--control-border-radius), 0);
49-
@include box-shadow($input-box-shadow);
50-
@include transition($input-transition);
26+
// Prevent default `.form-control` focus
27+
&:focus-visible {
28+
outline: 0;
29+
}
5130

52-
// Focus state when ghost input is focused
5331
&:focus-within {
5432
--focus-ring-offset: -1px;
55-
border-color: $input-focus-border-color;
33+
border-color: var(--focus-ring-color);
5634
@include focus-ring(true);
5735
}
5836

@@ -62,8 +40,6 @@ $form-adorn-icon-color: var(--fg-2) !default;
6240
min-width: 0; // Prevent text overflow
6341
}
6442

65-
66-
// Adornment at end (right in LTR) - input comes first visually
6743
&.form-adorn-end > .form-ghost {
6844
order: -1;
6945
}
@@ -89,23 +65,4 @@ $form-adorn-icon-color: var(--fg-2) !default;
8965
pointer-events: none;
9066
user-select: none;
9167
}
92-
93-
// Sizing variants
94-
.form-adorn-sm {
95-
--control-min-height: #{$control-min-height-sm};
96-
--control-padding-y: #{$control-padding-y-sm};
97-
--control-padding-x: #{$control-padding-x-sm};
98-
--control-font-size: #{$control-font-size-sm};
99-
--control-line-height: #{$control-line-height-sm};
100-
--control-border-radius: #{$control-border-radius-sm};
101-
}
102-
103-
.form-adorn-lg {
104-
--control-min-height: #{$control-min-height-lg};
105-
--control-padding-y: #{$control-padding-y-lg};
106-
--control-padding-x: #{$control-padding-x-lg};
107-
--control-font-size: #{$control-font-size-lg};
108-
--control-line-height: #{$control-line-height-lg};
109-
--control-border-radius: #{$control-border-radius-lg};
110-
}
11168
}

‎scss/forms/_form-control.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ $form-control-tokens: (
1818
--control-padding-x: var(--btn-input-padding-x),
1919
--control-font-size: var(--btn-input-font-size),
2020
--control-line-height: var(--btn-input-line-height),
21-
--control-color: var(--fg-body),
22-
--control-bg: var(--bg-body),
21+
--control-color: var(--input-color),
22+
--control-bg: var(--input-bg),
2323
--control-border-width: var(--border-width),
2424
--control-border-color: var(--border-color),
2525
--control-border-radius: var(--border-radius),

0 commit comments

Comments
 (0)