@oscarpalmer/oui 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/css/badge.css +5 -4
  2. package/dist/css/button.css +6 -4
  3. package/dist/css/color.css +25 -25
  4. package/dist/css/content.css +193 -0
  5. package/dist/css/form.css +128 -66
  6. package/dist/css/message.css +23 -16
  7. package/dist/css/reset.css +3 -1
  8. package/dist/css/table.css +26 -9
  9. package/package.json +4 -4
  10. package/src/css/badge.scss +7 -7
  11. package/src/css/button.scss +5 -3
  12. package/src/css/color.scss +25 -25
  13. package/src/css/content.scss +156 -0
  14. package/src/css/form.scss +124 -56
  15. package/src/css/message.scss +29 -21
  16. package/src/css/mixins.scss +25 -6
  17. package/src/css/reset.scss +3 -2
  18. package/src/css/table.scss +32 -7
package/src/css/color.scss CHANGED
@@ -29,16 +29,16 @@
29
29
  --oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
30
30
  --oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
31
31
 
32
- --oui-orange-0: light-dark(oklch(0.995 0.02 60), oklch(0.2 0.08 50));
33
- --oui-orange-1: light-dark(oklch(0.99 0.035 59), oklch(0.25 0.09 51));
32
+ --oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
33
+ --oui-orange-1: light-dark(oklch(0.985 0.035 59), oklch(0.25 0.09 51));
34
34
  --oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
35
35
  --oui-orange-3: light-dark(oklch(0.93 0.07 57), oklch(0.4 0.09 53));
36
- --oui-orange-4: light-dark(oklch(0.85 0.1 56), oklch(0.5 0.08 54));
37
- --oui-orange-5: light-dark(oklch(0.70 0.11 55), oklch(0.6 0.07 55));
38
- --oui-orange-6: light-dark(oklch(0.60 0.12 54), oklch(0.7 0.06 56));
39
- --oui-orange-7: light-dark(oklch(0.50 0.14 53), oklch(0.8 0.05 57));
40
- --oui-orange-8: light-dark(oklch(0.42 0.12 53), oklch(0.85 0.04 58));
41
- --oui-orange-9: light-dark(oklch(0.35 0.11 51), oklch(0.9 0.03 59));
36
+ --oui-orange-4: light-dark(oklch(0.87 0.1 56), oklch(0.5 0.08 54));
37
+ --oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
38
+ --oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
39
+ --oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
40
+ --oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
41
+ --oui-orange-9: light-dark(oklch(0.375 0.11 51), oklch(0.9 0.03 59));
42
42
  --oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
43
43
 
44
44
  --oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
@@ -53,28 +53,28 @@
53
53
  --oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
54
54
  --oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
55
55
 
56
- --oui-red-0: light-dark(oklch(0.995 0.024 25), oklch(0.2 0.08 25));
57
- --oui-red-1: light-dark(oklch(0.99 0.032 24), oklch(0.25 0.09 24));
58
- --oui-red-2: light-dark(oklch(0.96 0.05 23), oklch(0.32 0.1 23));
56
+ --oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
57
+ --oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
58
+ --oui-red-2: light-dark(oklch(0.97 0.05 23), oklch(0.32 0.1 23));
59
59
  --oui-red-3: light-dark(oklch(0.93 0.07 22), oklch(0.4 0.09 22));
60
- --oui-red-4: light-dark(oklch(0.85 0.1 21), oklch(0.5 0.08 21));
61
- --oui-red-5: light-dark(oklch(0.72 0.11 20), oklch(0.6 0.07 20));
62
- --oui-red-6: light-dark(oklch(0.60 0.12 19), oklch(0.7 0.06 19));
63
- --oui-red-7: light-dark(oklch(0.50 0.14 18), oklch(0.8 0.05 18));
64
- --oui-red-8: light-dark(oklch(0.42 0.12 17), oklch(0.85 0.04 17));
65
- --oui-red-9: light-dark(oklch(0.35 0.11 16), oklch(0.9 0.03 16));
60
+ --oui-red-4: light-dark(oklch(0.87 0.1 21), oklch(0.5 0.08 21));
61
+ --oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
62
+ --oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
63
+ --oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
64
+ --oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
65
+ --oui-red-9: light-dark(oklch(0.375 0.11 16), oklch(0.9 0.03 16));
66
66
  --oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
67
67
 
68
- --oui-yellow-0: light-dark(oklch(0.995 0.02 100), oklch(0.2 0.08 90));
69
- --oui-yellow-1: light-dark(oklch(0.99 0.035 99), oklch(0.25 0.09 91));
68
+ --oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
69
+ --oui-yellow-1: light-dark(oklch(0.985 0.035 99), oklch(0.25 0.09 91));
70
70
  --oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
71
71
  --oui-yellow-3: light-dark(oklch(0.93 0.07 97), oklch(0.4 0.09 93));
72
- --oui-yellow-4: light-dark(oklch(0.85 0.1 96), oklch(0.5 0.08 94));
73
- --oui-yellow-5: light-dark(oklch(0.72 0.11 95), oklch(0.6 0.07 95));
74
- --oui-yellow-6: light-dark(oklch(0.60 0.12 94), oklch(0.7 0.06 96));
75
- --oui-yellow-7: light-dark(oklch(0.50 0.14 93), oklch(0.8 0.05 97));
76
- --oui-yellow-8: light-dark(oklch(0.42 0.12 92), oklch(0.85 0.04 98));
77
- --oui-yellow-9: light-dark(oklch(0.35 0.11 91), oklch(0.9 0.03 99));
72
+ --oui-yellow-4: light-dark(oklch(0.87 0.1 96), oklch(0.5 0.08 94));
73
+ --oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
74
+ --oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
75
+ --oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
76
+ --oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
77
+ --oui-yellow-9: light-dark(oklch(0.375 0.11 91), oklch(0.9 0.03 99));
78
78
  --oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
79
79
 
80
80
  --oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
package/src/css/content.scss ADDED
@@ -0,0 +1,156 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
3
+ @use './mixins' as mixins;
4
+
5
+ @mixin thumb($background, $shadow) {
6
+ @include mixins.shadow(
7
+ color-mix(in oklab, $shadow, transparent 33%),
8
+ color-mix(in oklab, white, transparent 82.5%)
9
+ );
10
+
11
+ appearance: none;
12
+ min-width: 0.5em;
13
+ background-color: $background;
14
+ background-image: none;
15
+ border-radius: 0.25em;
16
+ }
17
+
18
+ @mixin track {
19
+ appearance: none;
20
+ height: 0.75em;
21
+ padding: 0.125em;
22
+ overflow: hidden;
23
+ background-color: var(--oui-absolute);
24
+ background-image: none;
25
+ border: 1px solid var(--oui-gray-3);
26
+ border-radius: 0.375em;
27
+ box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
28
+ }
29
+
30
+ .oui-card {
31
+ :where(&) {
32
+ @include mixins.card;
33
+ }
34
+ }
35
+
36
+ .oui-details {
37
+ :where(& > summary) {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ list-style: none;
41
+ outline: 4px solid
42
+ color-mix(
43
+ in oklab,
44
+ var(--oui-blue-6),
45
+ transparent var(--oui-outline-percentage, 100%)
46
+ );
47
+ outline-offset: 0.25em;
48
+ border-radius: 0.125em;
49
+ transition: 0.125s ease-in-out, margin 0s;
50
+ cursor: pointer;
51
+
52
+ &::before {
53
+ content: '';
54
+ width: 1em;
55
+ height: 1em;
56
+ margin: 0 0.5em 0 0;
57
+ background-color: currentColor;
58
+ mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
59
+ mask-size: contain;
60
+ mask-position: center;
61
+ mask-repeat: no-repeat;
62
+ transition: 0.125s ease-in-out;
63
+ transform: rotate(-90deg);
64
+ }
65
+
66
+ &:focus-visible {
67
+ --oui-outline-percentage: 50%;
68
+
69
+ padding: 0 0.5em 0 0.25em;
70
+ color: var(--oui-blue-8);
71
+ }
72
+
73
+ @media (hover: hover) {
74
+ &:hover {
75
+ color: var(--oui-blue-8);
76
+ }
77
+ }
78
+ }
79
+
80
+ :where(&[open] > summary) {
81
+ margin: 0 0 1em;
82
+
83
+ &::before {
84
+ transform: rotate(0deg);
85
+ }
86
+ }
87
+ }
88
+
89
+ .oui-formatted {
90
+ :where(&) {
91
+ @include mixins.card;
92
+
93
+ color: var(--oui-gray-8);
94
+ font-family: monospace, monospace;
95
+ font-size: 0.875rem;
96
+ line-height: 1.5;
97
+ }
98
+ }
99
+
100
+ .oui-meter {
101
+ :where(&) {
102
+ @include track;
103
+
104
+ &::-moz-meter-bar {
105
+ @include thumb(var(--oui-blue-5), var(--oui-blue-6));
106
+ }
107
+
108
+ &:-moz-meter-optimum::-moz-meter-bar {
109
+ @include thumb(var(--oui-green-5), var(--oui-green-6));
110
+ }
111
+
112
+ &:-moz-meter-sub-optimum::-moz-meter-bar {
113
+ @include thumb(var(--oui-yellow-5), var(--oui-yellow-6));
114
+ }
115
+
116
+ &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
117
+ @include thumb(var(--oui-red-5), var(--oui-red-6));
118
+ }
119
+
120
+ &::-webkit-meter-bar {
121
+ appearance: none;
122
+ background: none;
123
+ }
124
+
125
+ &::-webkit-meter-even-less-good-value {
126
+ @include thumb(var(--oui-red-5), var(--oui-red-6));
127
+ }
128
+
129
+ &::-webkit-meter-optimum-value {
130
+ @include thumb(var(--oui-green-5), var(--oui-green-6));
131
+ }
132
+
133
+ &::-webkit-meter-suboptimum-value {
134
+ @include thumb(var(--oui-yellow-5), var(--oui-yellow-6));
135
+ }
136
+ }
137
+ }
138
+
139
+ .oui-progress {
140
+ :where(&) {
141
+ @include track;
142
+
143
+ &::-moz-progress-bar {
144
+ @include thumb(var(--oui-blue-5), var(--oui-blue-6));
145
+ }
146
+
147
+ &::-webkit-progress-bar {
148
+ appearance: none;
149
+ background: none;
150
+ }
151
+
152
+ &::-webkit-progress-value {
153
+ @include thumb(var(--oui-blue-5), var(--oui-blue-6));
154
+ }
155
+ }
156
+ }
package/src/css/form.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use 'mixins.scss' as mixins;
4
4
 
5
5
  @mixin focus() {
6
- --oui-border-value: var(--oui-blue-6);
6
+ --oui-border-value: var(--oui-blue-5);
7
7
  --oui-foreground-value: inherit;
8
8
  --oui-outline-percentage: 75%;
9
9
  --oui-outline-value: var(--oui-blue-6);
@@ -11,7 +11,7 @@
11
11
 
12
12
  @mixin hover() {
13
13
  --oui-border-value: var(--oui-blue-4);
14
- --oui-foreground-percentage: 50%;
14
+ --oui-foreground-percentage: 0%;
15
15
  --oui-foreground-value: inherit;
16
16
  --oui-outline-percentage: 90%;
17
17
  --oui-outline-value: var(--oui-blue-6);
@@ -23,20 +23,29 @@
23
23
 
24
24
  @include outlined;
25
25
 
26
- background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
26
+ background-color: color-mix(
27
+ in oklab,
28
+ var(--oui-background-value),
29
+ transparent var(--oui-background-percentage)
30
+ );
27
31
  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
28
- box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 75%);
32
+ box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
29
33
  color: color-mix(
30
- in oklab,
31
- var(--oui-foreground-value, inherit),
32
- transparent var(--oui-foreground-percentage)
33
- );
34
+ in oklab,
35
+ var(--oui-foreground-value, inherit),
36
+ transparent var(--oui-foreground-percentage)
37
+ );
38
+ -webkit-text-fill-color: color-mix(
39
+ in oklab,
40
+ var(--oui-foreground-value, inherit),
41
+ transparent var(--oui-foreground-percentage)
42
+ );
34
43
  }
35
44
 
36
45
  @mixin invalid() {
37
- --oui-border-value: var(--oui-red-6);
46
+ --oui-border-value: var(--oui-red-5);
38
47
  --oui-foreground-value: var(--oui-red-9);
39
- --oui-outline-percentage: 75%;
48
+ --oui-outline-percentage: 82.5%;
40
49
  --oui-outline-value: var(--oui-red-6);
41
50
  }
42
51
 
@@ -55,9 +64,9 @@
55
64
  }
56
65
 
57
66
  @mixin valid() {
58
- --oui-border-value: var(--oui-green-6);
67
+ --oui-border-value: var(--oui-green-5);
59
68
  --oui-foreground-value: var(--oui-green-9);
60
- --oui-outline-percentage: 75%;
69
+ --oui-outline-percentage: 82.5%;
61
70
  --oui-outline-value: var(--oui-green-6);
62
71
  }
63
72
 
@@ -93,27 +102,32 @@
93
102
  padding: 0;
94
103
  }
95
104
 
96
- :where(&:is([type='date' i],
97
- [type='datetime-local' i],
98
- [type='month' i],
99
- [type='number' i],
100
- [type='tel' i],
101
- [type='time' i],
102
- [type='url' i],
103
- [type='week' i])) {
105
+ :where(
106
+ &:is(
107
+ [type='date' i],
108
+ [type='datetime-local' i],
109
+ [type='month' i],
110
+ [type='number' i],
111
+ [type='tel' i],
112
+ [type='time' i],
113
+ [type='url' i],
114
+ [type='week' i]
115
+ )
116
+ ) {
104
117
  font-variant-numeric: tabular-nums;
105
118
  }
106
119
 
107
120
  :where(&:is([type='file' i])) {
108
- padding-left: .5em;
121
+ padding-left: 0.5em;
109
122
 
110
123
  &::file-selector-button {
111
124
  @include mixins.button;
112
125
 
126
+ --oui-background-value: var(--oui-grey-2);
113
127
  --oui-outline-value: var(--oui-grey-6);
114
128
 
115
- margin: 0 .75em 0 0;
116
- font-size: .75em;
129
+ margin: 0 0.75em 0 0;
130
+ font-size: 0.75em;
117
131
  cursor: pointer;
118
132
  }
119
133
  }
@@ -128,7 +142,7 @@
128
142
  appearance: none;
129
143
  width: 100%;
130
144
  height: 0.75em;
131
- border-radius: .75em;
145
+ border-radius: 0.75em;
132
146
  position: relative;
133
147
  }
134
148
 
@@ -141,12 +155,11 @@
141
155
  appearance: none;
142
156
  width: 1.25em;
143
157
  height: 1.25em;
144
- background-color:
145
- color-mix(
146
- in oklab,
147
- var(--oui-background-value),
148
- transparent var(--oui-background-percentage)
149
- );
158
+ background-color: color-mix(
159
+ in oklab,
160
+ var(--oui-background-value),
161
+ transparent var(--oui-background-percentage)
162
+ );
150
163
  border: 2px solid var(--oui-absolute);
151
164
  border-radius: 1.25em;
152
165
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
@@ -160,11 +173,20 @@
160
173
  }
161
174
  }
162
175
 
163
- :where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-invalid, [aria-invalid='true' i])) {
176
+ :where(
177
+ &.oui-validatable:not(
178
+ [disabled],
179
+ [readonly],
180
+ [aria-disabled='true' i]
181
+ ):is(
182
+ :user-invalid:not([aria-invalid='false' i]),
183
+ [aria-invalid='true' i]
184
+ )
185
+ ) {
164
186
  @include invalid;
165
187
 
166
188
  &::file-selector-button {
167
- --oui-background-value: var(--oui-red-1);
189
+ --oui-background-value: var(--oui-red-2);
168
190
  --oui-foreground-value: var(--oui-red-8);
169
191
  --oui-outline-value: var(--oui-red-6);
170
192
  }
@@ -176,13 +198,24 @@
176
198
  &::range-track {
177
199
  @include invalid;
178
200
  }
201
+
202
+ & > option:checked {
203
+ background-color: var(--oui-red-2);
204
+ color: var(--oui-red-9);
205
+ }
179
206
  }
180
207
 
181
- :where(&.oui-validatable:not([disabled], [readonly], [aria-disabled='true' i]):is(:user-valid, [aria-invalid='false' i])) {
208
+ :where(
209
+ &.oui-validatable:not(
210
+ [disabled],
211
+ [readonly],
212
+ [aria-disabled='true' i]
213
+ ):is(:user-valid:not([aria-invalid='true' i]), [aria-invalid='false' i])
214
+ ) {
182
215
  @include valid;
183
216
 
184
217
  &::file-selector-button {
185
- --oui-background-value: var(--oui-green-1);
218
+ --oui-background-value: var(--oui-green-2);
186
219
  --oui-foreground-value: var(--oui-green-8);
187
220
  --oui-outline-value: var(--oui-green-6);
188
221
  }
@@ -194,19 +227,28 @@
194
227
  &::range-thumb {
195
228
  --oui-background-value: var(--oui-green-6);
196
229
  }
230
+
231
+ & > option:checked {
232
+ background-color: var(--oui-green-2);
233
+ color: var(--oui-green-9);
234
+ }
197
235
  }
198
236
 
199
- :where(&:not([disabled], [readonly], [aria-disabled="true" i])) {
237
+ :where(&:not([disabled], [readonly], [aria-disabled='true' i])) {
200
238
  &::-webkit-calendar-picker-indicator {
201
239
  outline: 4px solid transparent;
202
240
  outline-offset: 2px;
203
241
  border-radius: 2em;
204
- transition: .125s ease-in-out;
242
+ transition: 0.125s ease-in-out;
205
243
  cursor: pointer;
206
244
 
207
245
  @media (hover: hover) {
208
246
  &:hover {
209
- outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
247
+ outline-color: color-mix(
248
+ in oklab,
249
+ var(--oui-blue-6),
250
+ transparent 75%
251
+ );
210
252
  }
211
253
  }
212
254
 
@@ -216,12 +258,12 @@
216
258
  }
217
259
  }
218
260
 
219
- :where(&:not([disabled], [readonly], [aria-disabled="true" i]):focus),
220
- :where(&:not([disabled], [readonly], [aria-disabled="true" i]):focus-within) {
261
+ :where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
262
+ :where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
221
263
  @include focus;
222
264
 
223
265
  &::file-selector-button {
224
- --oui-background-value: var(--oui-blue-1);
266
+ --oui-background-value: var(--oui-blue-2);
225
267
  --oui-foreground-value: var(--oui-blue-8);
226
268
  --oui-outline-value: var(--oui-blue-6);
227
269
  }
@@ -239,11 +281,11 @@
239
281
  }
240
282
 
241
283
  @media (hover: hover) {
242
- :where(&:not([disabled], [aria-disabled='true' i]):hover) {
284
+ :where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
243
285
  @include hover;
244
286
 
245
287
  &::file-selector-button {
246
- --oui-background-value: var(--oui-blue-1);
288
+ --oui-background-value: var(--oui-blue-2);
247
289
  --oui-foreground-value: var(--oui-blue-8);
248
290
  --oui-outline-value: var(--oui-blue-6);
249
291
  }
@@ -262,6 +304,12 @@
262
304
  --oui-foreground-percentage: 25%;
263
305
 
264
306
  font-style: italic;
307
+
308
+ &::file-selector-button {
309
+ --oui-background-value: var(--oui-gray-1);
310
+
311
+ cursor: default;
312
+ }
265
313
  }
266
314
 
267
315
  :where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
@@ -271,7 +319,6 @@
271
319
  :where(&[disabled], &[aria-disabled='true' i]) {
272
320
  --oui-background-percentage: 50%;
273
321
 
274
- &::file-selector-button,
275
322
  &::range-thumb {
276
323
  --oui-background-value: var(--oui-gray-1);
277
324
 
@@ -284,8 +331,7 @@
284
331
  }
285
332
 
286
333
  &::-webkit-calendar-picker-indicator {
287
- color: red;
288
- stroke: red;
334
+ opacity: 0.5;
289
335
  }
290
336
  }
291
337
  }
@@ -315,7 +361,7 @@ select.oui-input:is([multiple]) {
315
361
  }
316
362
 
317
363
  :where(& > option:nth-of-type(2n)) {
318
- background-color: color-mix(in oklab, var(--oui-blue-0), transparent 33%);
364
+ background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
319
365
  }
320
366
 
321
367
  :where(& > option:checked) {
@@ -324,7 +370,7 @@ select.oui-input:is([multiple]) {
324
370
 
325
371
  &::before {
326
372
  content: var(--oui-on);
327
- margin: 0 .75em 0 0;
373
+ margin: 0 0.75em 0 0;
328
374
  }
329
375
  }
330
376
  }
@@ -342,7 +388,7 @@ select.oui-input:is([multiple]) {
342
388
 
343
389
  :where(.oui-label) {
344
390
  cursor: pointer;
345
- transition: .125s ease-in-out;
391
+ transition: 0.125s ease-in-out;
346
392
 
347
393
  @media (hover: hover) {
348
394
  :where(&[for]:hover) {
@@ -381,19 +427,33 @@ select.oui-input:is([multiple]) {
381
427
  }
382
428
 
383
429
  &::before {
384
- background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
385
- box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
386
- outline: 4px solid color-mix(
430
+ background-color: color-mix(
387
431
  in oklab,
388
- var(--oui-outline-value),
389
- transparent var(--oui-outline-percentage)
432
+ var(--oui-background-value),
433
+ transparent var(--oui-background-percentage)
390
434
  );
435
+ outline: 4px solid
436
+ color-mix(
437
+ in oklab,
438
+ var(--oui-outline-value),
439
+ transparent var(--oui-outline-percentage)
440
+ );
391
441
  outline-offset: 0;
392
442
  border: 1px solid var(--oui-border-value);
443
+ box-shadow: inset 0 1px 2px 0
444
+ color-mix(
445
+ in oklab,
446
+ var(--oui-shadow-value),
447
+ transparent var(--oui-shadow-percentage)
448
+ );
393
449
  }
394
450
 
395
451
  &::after {
396
- color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
452
+ color: color-mix(
453
+ in oklab,
454
+ var(--oui-foreground-value),
455
+ transparent var(--oui-foreground-percentage)
456
+ );
397
457
  }
398
458
  }
399
459
 
@@ -531,7 +591,11 @@ select.oui-input:is([multiple]) {
531
591
  color: var(--oui-blue-8);
532
592
  }
533
593
 
534
- :where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
594
+ :where(
595
+ &:has(
596
+ input:not([disabled], [aria-disabled='true' i]):is(:checked)
597
+ ):hover
598
+ ) {
535
599
  --oui-background-percentage: 50%;
536
600
  --oui-background-value: var(--oui-blue-6);
537
601
  }
@@ -544,7 +608,11 @@ select.oui-input:is([multiple]) {
544
608
  --oui-foreground-percentage: 25%;
545
609
  --oui-foreground-value: currentColor;
546
610
 
547
- color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
611
+ color: color-mix(
612
+ in oklab,
613
+ var(--oui-foreground-value),
614
+ transparent var(--oui-foreground-percentage)
615
+ );
548
616
  font-style: italic;
549
617
  cursor: default;
550
618
 
package/src/css/message.scss CHANGED
@@ -1,25 +1,27 @@
1
1
  /*! https://github.com/oscarpalmer/oui */
2
2
 
3
+ @use './mixins.scss' as mixins;
4
+
3
5
  .oui-message {
4
6
  :where(&) {
5
- --oui-shadow-value: color-mix(
6
- in oklch,
7
- var(--oui-shadow, var(--oui-gray-6)),
8
- transparent 95%
7
+ --oui-shadow-mixed: color-mix(
8
+ in oklab,
9
+ var(--oui-shadow-value, var(--oui-gray-6)),
10
+ transparent 92.5%
11
+ );
12
+
13
+ @include mixins.card(
14
+ color-mix(
15
+ in oklab,
16
+ var(--oui-background, var(--oui-gray-0)),
17
+ transparent 25%
18
+ ),
19
+ var(--oui-shadow-mixed),
9
20
  );
10
21
 
11
- padding: 1em;
12
22
  display: inline-flex;
13
23
  flex-flow: column nowrap;
14
24
  gap: 1em;
15
- background-color: color-mix(
16
- in oklab,
17
- var(--oui-background, var(--oui-gray-0)),
18
- transparent 25%
19
- );
20
- border-radius: 0.5em;
21
- box-shadow: 0 0 0 1px var(--oui-shadow-value),
22
- 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
23
25
  color: var(--oui-foreground, var(--oui-gray-8));
24
26
  line-height: 1.25;
25
27
  }
@@ -31,8 +33,8 @@
31
33
 
32
34
  :where(& hr) {
33
35
  height: 1px;
34
- margin: 0 -1em;
35
- background-color: var(--oui-shadow-value, var(--oui-gray-2));
36
+ margin: 0 -1.25em;
37
+ background-color: var(--oui-border, var(--oui-gray-2));
36
38
  border: none;
37
39
  }
38
40
 
@@ -44,37 +46,43 @@
44
46
 
45
47
  :where(&-blue, &-info) {
46
48
  --oui-background: var(--oui-blue-0);
49
+ --oui-border: var(--oui-blue-2);
47
50
  --oui-foreground: var(--oui-blue-8);
48
- --oui-shadow: var(--oui-blue-6);
51
+ --oui-shadow-value: var(--oui-blue-6);
49
52
  }
50
53
 
51
54
  :where(&-green, &-success) {
52
55
  --oui-background: var(--oui-green-0);
56
+ --oui-border: var(--oui-green-2);
53
57
  --oui-foreground: var(--oui-green-8);
54
- --oui-shadow: var(--oui-green-6);
58
+ --oui-shadow-value: var(--oui-green-6);
55
59
  }
56
60
 
57
61
  :where(&-orange, &-warning) {
58
62
  --oui-background: var(--oui-orange-0);
63
+ --oui-border: var(--oui-orange-2);
59
64
  --oui-foreground: var(--oui-orange-8);
60
- --oui-shadow: var(--oui-orange-6);
65
+ --oui-shadow-value: var(--oui-orange-6);
61
66
  }
62
67
 
63
68
  :where(&-purple, &-special) {
64
69
  --oui-background: var(--oui-purple-0);
70
+ --oui-border: var(--oui-purple-2);
65
71
  --oui-foreground: var(--oui-purple-8);
66
- --oui-shadow: var(--oui-purple-6);
72
+ --oui-shadow-value: var(--oui-purple-6);
67
73
  }
68
74
 
69
75
  :where(&-red, &-error) {
70
76
  --oui-background: var(--oui-red-0);
77
+ --oui-border: var(--oui-red-2);
71
78
  --oui-foreground: var(--oui-red-8);
72
- --oui-shadow: var(--oui-red-6);
79
+ --oui-shadow-value: var(--oui-red-6);
73
80
  }
74
81
 
75
82
  :where(&-yellow, &-notice) {
76
83
  --oui-background: var(--oui-yellow-0);
84
+ --oui-border: var(--oui-yellow-2);
77
85
  --oui-foreground: var(--oui-yellow-8);
78
- --oui-shadow: var(--oui-yellow-6);
86
+ --oui-shadow-value: var(--oui-yellow-6);
79
87
  }
80
88
  }