@oscarpalmer/oui 0.7.0 → 0.8.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 (14) hide show
  1. package/dist/css/{badges.css → badge.css} +9 -9
  2. package/dist/css/color.css +102 -0
  3. package/dist/css/form.css +26 -23
  4. package/dist/css/message.css +4 -4
  5. package/dist/css/table.css +8 -8
  6. package/package.json +1 -6
  7. package/src/css/{badges.scss → badge.scss} +9 -9
  8. package/src/css/color.scss +113 -0
  9. package/src/css/form.scss +26 -23
  10. package/src/css/message.scss +4 -4
  11. package/src/css/mixins.scss +0 -56
  12. package/src/css/table.scss +8 -8
  13. package/dist/css/colours.css +0 -102
  14. package/src/css/colours.scss +0 -113
package/dist/css/{badges.css → badge.css} RENAMED
@@ -2,9 +2,9 @@
2
2
  display: inline-flex;
3
3
  flex-flow: row nowrap;
4
4
  gap: 0.5em;
5
- background-color: var(--background, var(--oui-grey-1, #eee));
6
- border: 1px solid var(--border, var(--oui-grey-3, #ccc));
7
- color: var(--foreground, var(--oui-grey-8, #333));
5
+ background-color: var(--background, var(--oui-gray-1));
6
+ border: 1px solid var(--border, var(--oui-gray-3));
7
+ color: var(--foreground, var(--oui-gray-8));
8
8
  line-height: 1.125;
9
9
  }
10
10
  :where(.oui-pill) {
@@ -27,30 +27,30 @@
27
27
  :where(.oui-pill-blue, .oui-tag-blue) {
28
28
  --background: var(--oui-blue-1);
29
29
  --border: var(--oui-blue-3);
30
- --foreground: var(--oui-blue-9);
30
+ --foreground: var(--oui-blue-8);
31
31
  }
32
32
  :where(.oui-pill-green, .oui-tag-green) {
33
33
  --background: var(--oui-green-1);
34
34
  --border: var(--oui-green-3);
35
- --foreground: var(--oui-green-9);
35
+ --foreground: var(--oui-green-8);
36
36
  }
37
37
  :where(.oui-pill-orange, .oui-tag-orange) {
38
38
  --background: var(--oui-orange-1);
39
39
  --border: var(--oui-orange-3);
40
- --foreground: var(--oui-orange-9);
40
+ --foreground: var(--oui-orange-8);
41
41
  }
42
42
  :where(.oui-pill-purple, .oui-tag-purple) {
43
43
  --background: var(--oui-purple-1);
44
44
  --border: var(--oui-purple-3);
45
- --foreground: var(--oui-purple-9);
45
+ --foreground: var(--oui-purple-8);
46
46
  }
47
47
  :where(.oui-pill-red, .oui-tag-red) {
48
48
  --background: var(--oui-red-1);
49
49
  --border: var(--oui-red-3);
50
- --foreground: var(--oui-red-9);
50
+ --foreground: var(--oui-red-8);
51
51
  }
52
52
  :where(.oui-pill-yellow, .oui-tag-yellow) {
53
53
  --background: var(--oui-yellow-1);
54
54
  --border: var(--oui-yellow-3);
55
- --foreground: var(--oui-yellow-9);
55
+ --foreground: var(--oui-yellow-8);
56
56
  }
package/dist/css/color.css ADDED
@@ -0,0 +1,102 @@
1
+ :root {
2
+ --oui-absolute: light-dark(white, black);
3
+ --oui-blue-0: light-dark(oklch(0.98 0.015 260), oklch(0.18 0.1 250));
4
+ --oui-blue-1: light-dark(oklch(0.95 0.03 259), oklch(0.24 0.12 251));
5
+ --oui-blue-2: light-dark(oklch(0.9 0.05 258), oklch(0.32 0.14 252));
6
+ --oui-blue-3: light-dark(oklch(0.83 0.07 257), oklch(0.4 0.16 253));
7
+ --oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.5 0.14 254));
8
+ --oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.6 0.11 255));
9
+ --oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.7 0.09 256));
10
+ --oui-blue-7: light-dark(oklch(0.48 0.16 253), oklch(0.78 0.07 257));
11
+ --oui-blue-8: light-dark(oklch(0.34 0.14 252), oklch(0.85 0.05 258));
12
+ --oui-blue-9: light-dark(oklch(0.22 0.12 251), oklch(0.91 0.03 259));
13
+ --oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.01 260));
14
+ --oui-green-0: light-dark(oklch(0.98 0.015 150), oklch(0.18 0.1 140));
15
+ --oui-green-1: light-dark(oklch(0.95 0.03 149), oklch(0.24 0.12 141));
16
+ --oui-green-2: light-dark(oklch(0.9 0.05 148), oklch(0.32 0.14 142));
17
+ --oui-green-3: light-dark(oklch(0.83 0.07 147), oklch(0.4 0.15 143));
18
+ --oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.5 0.14 144));
19
+ --oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.6 0.12 145));
20
+ --oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.7 0.09 146));
21
+ --oui-green-7: light-dark(oklch(0.48 0.15 143), oklch(0.78 0.07 147));
22
+ --oui-green-8: light-dark(oklch(0.34 0.14 142), oklch(0.85 0.05 148));
23
+ --oui-green-9: light-dark(oklch(0.22 0.12 141), oklch(0.91 0.03 149));
24
+ --oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
25
+ --oui-orange-0: light-dark(oklch(0.985 0.02 60), oklch(0.18 0.1 50));
26
+ --oui-orange-1: light-dark(oklch(0.95 0.03 59), oklch(0.24 0.11 51));
27
+ --oui-orange-2: light-dark(oklch(0.9 0.05 58), oklch(0.32 0.12 52));
28
+ --oui-orange-3: light-dark(oklch(0.83 0.08 57), oklch(0.4 0.13 53));
29
+ --oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.5 0.14 54));
30
+ --oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.6 0.13 55));
31
+ --oui-orange-6: light-dark(oklch(0.57 0.14 54), oklch(0.7 0.11 56));
32
+ --oui-orange-7: light-dark(oklch(0.46 0.13 53), oklch(0.78 0.08 57));
33
+ --oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.85 0.05 58));
34
+ --oui-orange-9: light-dark(oklch(0.22 0.11 51), oklch(0.91 0.03 59));
35
+ --oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.97 0.02 60));
36
+ --oui-purple-0: light-dark(oklch(0.98 0.015 300), oklch(0.18 0.1 290));
37
+ --oui-purple-1: light-dark(oklch(0.95 0.03 299), oklch(0.24 0.11 291));
38
+ --oui-purple-2: light-dark(oklch(0.9 0.05 298), oklch(0.32 0.12 292));
39
+ --oui-purple-3: light-dark(oklch(0.83 0.07 297), oklch(0.4 0.13 293));
40
+ --oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.5 0.12 294));
41
+ --oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.6 0.11 295));
42
+ --oui-purple-6: light-dark(oklch(0.58 0.12 294), oklch(0.7 0.09 296));
43
+ --oui-purple-7: light-dark(oklch(0.48 0.13 293), oklch(0.78 0.07 297));
44
+ --oui-purple-8: light-dark(oklch(0.34 0.12 292), oklch(0.85 0.05 298));
45
+ --oui-purple-9: light-dark(oklch(0.22 0.11 291), oklch(0.91 0.03 299));
46
+ --oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
47
+ --oui-red-0: light-dark(oklch(0.98 0.015 15), oklch(0.18 0.1 25));
48
+ --oui-red-1: light-dark(oklch(0.95 0.025 16), oklch(0.24 0.125 24));
49
+ --oui-red-2: light-dark(oklch(0.9 0.045 17), oklch(0.32 0.15 23));
50
+ --oui-red-3: light-dark(oklch(0.83 0.08 18), oklch(0.4 0.17 22));
51
+ --oui-red-4: light-dark(oklch(0.75 0.11 19), oklch(0.5 0.16 21));
52
+ --oui-red-5: light-dark(oklch(0.67 0.15 20), oklch(0.6 0.15 20));
53
+ --oui-red-6: light-dark(oklch(0.58 0.16 21), oklch(0.7 0.11 19));
54
+ --oui-red-7: light-dark(oklch(0.48 0.17 22), oklch(0.78 0.08 18));
55
+ --oui-red-8: light-dark(oklch(0.34 0.15 23), oklch(0.85 0.045 17));
56
+ --oui-red-9: light-dark(oklch(0.22 0.125 24), oklch(0.91 0.025 16));
57
+ --oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
58
+ --oui-yellow-0: light-dark(oklch(0.985 0.02 100), oklch(0.18 0.1 90));
59
+ --oui-yellow-1: light-dark(oklch(0.955 0.04 99), oklch(0.24 0.12 91));
60
+ --oui-yellow-2: light-dark(oklch(0.915 0.08 98), oklch(0.32 0.14 92));
61
+ --oui-yellow-3: light-dark(oklch(0.865 0.12 97), oklch(0.4 0.16 93));
62
+ --oui-yellow-4: light-dark(oklch(0.805 0.14 96), oklch(0.5 0.18 94));
63
+ --oui-yellow-5: light-dark(oklch(0.735 0.16 95), oklch(0.6 0.16 95));
64
+ --oui-yellow-6: light-dark(oklch(0.635 0.18 94), oklch(0.7 0.14 96));
65
+ --oui-yellow-7: light-dark(oklch(0.515 0.16 93), oklch(0.78 0.12 97));
66
+ --oui-yellow-8: light-dark(oklch(0.385 0.14 92), oklch(0.85 0.08 98));
67
+ --oui-yellow-9: light-dark(oklch(0.255 0.12 91), oklch(0.91 0.04 99));
68
+ --oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.97 0.02 100));
69
+ --oui-gray-0: light-dark(oklch(0.99 0 0), oklch(0.18 0 0));
70
+ --oui-gray-1: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
71
+ --oui-gray-2: light-dark(oklch(0.94 0 0), oklch(0.32 0 0));
72
+ --oui-gray-3: light-dark(oklch(0.88 0 0), oklch(0.4 0 0));
73
+ --oui-gray-4: light-dark(oklch(0.78 0 0), oklch(0.5 0 0));
74
+ --oui-gray-5: light-dark(oklch(0.67 0 0), oklch(0.6 0 0));
75
+ --oui-gray-6: light-dark(oklch(0.58 0 0), oklch(0.7 0 0));
76
+ --oui-gray-7: light-dark(oklch(0.48 0 0), oklch(0.78 0 0));
77
+ --oui-gray-8: light-dark(oklch(0.34 0 0), oklch(0.85 0 0));
78
+ --oui-gray-9: light-dark(oklch(0.22 0 0), oklch(0.91 0 0));
79
+ --oui-gray-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
80
+ --oui-slate-0: light-dark(oklch(0.99 0.0033 255), oklch(0.18 0.005 255));
81
+ --oui-slate-1: light-dark(oklch(0.97 0.0067 255), oklch(0.24 0.0075 255));
82
+ --oui-slate-2: light-dark(oklch(0.94 0.01 255), oklch(0.32 0.01 255));
83
+ --oui-slate-3: light-dark(oklch(0.88 0.0125 255), oklch(0.4 0.0125 255));
84
+ --oui-slate-4: light-dark(oklch(0.78 0.015 255), oklch(0.5 0.015 255));
85
+ --oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.6 0.02 255));
86
+ --oui-slate-6: light-dark(oklch(0.58 0.015 255), oklch(0.7 0.015 255));
87
+ --oui-slate-7: light-dark(oklch(0.48 0.0125 255), oklch(0.78 0.0125 255));
88
+ --oui-slate-8: light-dark(oklch(0.34 0.01 255), oklch(0.85 0.01 255));
89
+ --oui-slate-9: light-dark(oklch(0.22 0.0075 255), oklch(0.91 0.0075 255));
90
+ --oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
91
+ --oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.18 0.005 95));
92
+ --oui-stone-1: light-dark(oklch(0.97 0.0067 95), oklch(0.24 0.0075 95));
93
+ --oui-stone-2: light-dark(oklch(0.94 0.01 95), oklch(0.32 0.01 95));
94
+ --oui-stone-3: light-dark(oklch(0.88 0.0125 95), oklch(0.4 0.0125 95));
95
+ --oui-stone-4: light-dark(oklch(0.78 0.015 95), oklch(0.5 0.015 95));
96
+ --oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.6 0.02 95));
97
+ --oui-stone-6: light-dark(oklch(0.58 0.015 95), oklch(0.7 0.015 95));
98
+ --oui-stone-7: light-dark(oklch(0.48 0.0125 95), oklch(0.78 0.0125 95));
99
+ --oui-stone-8: light-dark(oklch(0.34 0.01 95), oklch(0.85 0.01 95));
100
+ --oui-stone-9: light-dark(oklch(0.22 0.0075 95), oklch(0.91 0.0075 95));
101
+ --oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
102
+ }
package/dist/css/form.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  :where(.oui-fieldset) {
3
3
  padding: 1em;
4
- border: 1px solid var(--oui-grey-3);
4
+ border: 1px solid var(--oui-gray-3);
5
5
  border-radius: 0.25em;
6
6
  }
7
7
 
@@ -10,9 +10,9 @@
10
10
  outline: 3px solid transparent;
11
11
  outline-offset: 0;
12
12
  background-color: var(--oui-absolute);
13
- border-color: var(--oui-grey-3);
13
+ border-color: var(--oui-gray-3);
14
14
  border-radius: 0.25em;
15
- box-shadow: inset 0 1px 2px 0 color-mix(in srgb, var(--oui-grey-10), transparent 80%);
15
+ box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--oui-gray-10), transparent 80%);
16
16
  transition: 0.125s ease-in-out;
17
17
  }
18
18
  :where(.oui-input:not(textarea)) {
@@ -32,30 +32,30 @@
32
32
  }
33
33
  :where(.oui-input.oui-validateable:not([disabled], [aria-disabled=true]):is(:user-invalid,
34
34
  [aria-invalid=true])) {
35
- outline-color: color-mix(in srgb, var(--oui-red-6), transparent 60%);
35
+ outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
36
36
  border-color: var(--oui-red-6);
37
37
  }
38
38
  :where(.oui-input.oui-validateable:not([disabled], [aria-disabled=true]):is(:user-valid,
39
39
  [aria-invalid=false])) {
40
- outline-color: color-mix(in srgb, var(--oui-green-6), transparent 60%);
40
+ outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
41
41
  border-color: var(--oui-green-6);
42
42
  }
43
43
  :where(.oui-input:not([disabled], [aria-disabled=true]):focus) {
44
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
44
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
45
45
  border-color: var(--oui-blue-6);
46
46
  }
47
47
  @media (hover: hover) {
48
48
  :where(.oui-input:not([disabled], [aria-disabled=true]):hover) {
49
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
49
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
50
50
  border-color: var(--oui-blue-6);
51
51
  }
52
52
  }
53
53
  :where(.oui-input[readonly]) {
54
- color: color-mix(in srgb, currentColor, transparent 12.5%);
54
+ color: color-mix(in oklab, currentColor, transparent 12.5%);
55
55
  }
56
56
  :where(.oui-input[disabled], .oui-input[aria-disabled=true]) {
57
- background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
58
- color: color-mix(in srgb, currentColor, transparent 25%);
57
+ background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
58
+ color: color-mix(in oklab, currentColor, transparent 25%);
59
59
  }
60
60
 
61
61
  :where(select.oui-input) {
@@ -80,7 +80,7 @@
80
80
 
81
81
  :where(.oui-legend) {
82
82
  padding: 0.5em;
83
- border: 1px solid var(--oui-grey-3);
83
+ border: 1px solid var(--oui-gray-3);
84
84
  border-radius: 0.25em;
85
85
  }
86
86
 
@@ -107,8 +107,8 @@
107
107
  width: 2.5em;
108
108
  height: 1.5em;
109
109
  display: inline-block;
110
- background-color: var(--oui-grey-0);
111
- border: 1px solid var(--oui-grey-3);
110
+ background-color: var(--oui-gray-0);
111
+ border: 1px solid var(--oui-gray-3);
112
112
  border-radius: 3em;
113
113
  right: 0;
114
114
  }
@@ -119,7 +119,7 @@
119
119
  background-color: var(--oui-absolute);
120
120
  border-radius: 1.5em;
121
121
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
122
- color: var(--oui-grey-8);
122
+ color: var(--oui-gray-8);
123
123
  font-size: 0.75em;
124
124
  font-weight: bold;
125
125
  line-height: 1.5em;
@@ -143,7 +143,7 @@
143
143
  height: 1.5em;
144
144
  display: inline-block;
145
145
  background-color: transparent;
146
- border: 1px solid var(--oui-grey-4);
146
+ border: 1px solid var(--oui-gray-4);
147
147
  inset: 0 auto auto 0;
148
148
  }
149
149
  :where(.oui-toggle)::after {
@@ -189,7 +189,7 @@
189
189
  }
190
190
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):focus-within,
191
191
  .oui-toggle:has(input:not([disabled], [aria-disabled=true])):focus-within)::before {
192
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
192
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
193
193
  border-color: var(--oui-absolute);
194
194
  }
195
195
  @media (hover: hover) {
@@ -199,12 +199,12 @@
199
199
  }
200
200
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):hover,
201
201
  .oui-toggle:has(input:not([disabled], [aria-disabled=true])):hover)::before {
202
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
202
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
203
203
  border-color: var(--oui-blue-6);
204
204
  }
205
205
  :where(.oui-switch:has(input:not([disabled], [aria-disabled=true]):is(:checked)):hover,
206
206
  .oui-toggle:has(input:not([disabled], [aria-disabled=true]):is(:checked)):hover)::before {
207
- background-color: color-mix(in srgb, var(--oui-blue-6), transparent 40%);
207
+ background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
208
208
  }
209
209
  }
210
210
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
@@ -212,18 +212,21 @@
212
212
  cursor: default;
213
213
  }
214
214
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
215
- .oui-toggle:has(input[disabled], input[aria-disabled=true])), :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
215
+ .oui-toggle:has(input[disabled], input[aria-disabled=true])) {
216
+ color: color-mix(in oklab, currentColor, transparent 25%);
217
+ }
218
+ :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
216
219
  .oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
217
- color: color-mix(in srgb, currentColor, transparent 25%);
220
+ color: color-mix(in oklab, currentColor, transparent);
218
221
  }
219
222
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
220
223
  .oui-toggle:has(input[disabled], input[aria-disabled=true]))::before {
221
- background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
222
- border-color: var(--oui-grey-3);
224
+ background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
225
+ border-color: var(--oui-gray-3);
223
226
  }
224
227
  :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
225
228
  .oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
226
- box-shadow: 0 0 0 1px var(--oui-grey-3);
229
+ box-shadow: 0 0 0 1px var(--oui-gray-3);
227
230
  text-shadow: none;
228
231
  }
229
232
 
package/dist/css/message.css CHANGED
@@ -3,10 +3,10 @@
3
3
  display: inline-flex;
4
4
  flex-flow: column nowrap;
5
5
  gap: 1em;
6
- background-color: var(--background, var(--oui-grey-0, #eee));
7
- border: 1px solid var(--border, var(--oui-grey-2, #ccc));
6
+ background-color: var(--background, var(--oui-gray-0));
7
+ border: 1px solid var(--border, var(--oui-gray-2));
8
8
  border-radius: 0.5em;
9
- color: var(--foreground, var(--oui-grey-8, #333));
9
+ color: var(--foreground, var(--oui-gray-8));
10
10
  line-height: 1.25;
11
11
  }
12
12
  :where(.oui-message h2, .oui-message h3, .oui-message h4, .oui-message h5, .oui-message h6) {
@@ -16,7 +16,7 @@
16
16
  :where(.oui-message hr) {
17
17
  height: 1px;
18
18
  margin: 0 -1em;
19
- background-color: var(--border, var(--oui-grey-2));
19
+ background-color: var(--border, var(--oui-gray-2));
20
20
  border: none;
21
21
  }
22
22
  :where(.oui-message p) {
package/dist/css/table.css CHANGED
@@ -4,7 +4,7 @@
4
4
  :where(.oui-table-wrapper) {
5
5
  max-height: 32em;
6
6
  overflow: auto;
7
- border: 1px solid var(--oui-grey-3);
7
+ border: 1px solid var(--oui-gray-3);
8
8
  border-radius: 0.25em;
9
9
  position: relative;
10
10
  overscroll-behavior-y: none;
@@ -12,8 +12,8 @@
12
12
  :where(.oui-table caption) {
13
13
  height: 2rem;
14
14
  align-content: center;
15
- background-color: var(--oui-grey-1);
16
- border: solid var(--oui-grey-3);
15
+ background-color: var(--oui-gray-1);
16
+ border: solid var(--oui-gray-3);
17
17
  border-width: 0 0 1px 0;
18
18
  font-size: 0.875rem;
19
19
  text-align: left;
@@ -23,11 +23,11 @@
23
23
  z-index: 2;
24
24
  }
25
25
  :where(.oui-table tbody tr:nth-child(2n)) {
26
- background-color: var(--oui-blue-0);
26
+ background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
27
27
  }
28
28
  :where(.oui-table th, .oui-table tfoot td) {
29
- background-color: var(--oui-grey-1);
30
- border: solid var(--oui-grey-3);
29
+ background-color: var(--oui-gray-1);
30
+ border: solid var(--oui-gray-3);
31
31
  border-width: 0 1px 0 0;
32
32
  position: sticky;
33
33
  left: 0;
@@ -35,7 +35,7 @@
35
35
  }
36
36
  :where(.oui-table th, .oui-table tfoot td)::after {
37
37
  content: "";
38
- border-bottom: 1px solid var(--oui-grey-3);
38
+ border-bottom: 1px solid var(--oui-gray-3);
39
39
  position: absolute;
40
40
  }
41
41
  :where(.oui-table th, .oui-table td) {
@@ -54,7 +54,7 @@
54
54
  inset: 0 0 auto 0;
55
55
  }
56
56
  :where(.oui-table tbody td) {
57
- border: solid var(--oui-grey-3);
57
+ border: solid var(--oui-gray-3);
58
58
  border-width: 0 1px 1px 0;
59
59
  }
60
60
  :where(.oui-table tbody tr:last-child td) {
package/package.json CHANGED
@@ -9,11 +9,6 @@
9
9
  "sass": "^1.83",
10
10
  "stylelint": "^16.14"
11
11
  },
12
- "exports": {
13
- "./css/a11y": "./dist/css/a11y.css",
14
- "./css/flex": "./dist/css/flex.css",
15
- "./css/reset": "./dist/css/reset.css"
16
- },
17
12
  "files": ["dist", "src"],
18
13
  "keywords": [
19
14
  "css",
@@ -36,5 +31,5 @@
36
31
  "watch": "npx sass ./src/css:./dist/css --no-source-map --watch"
37
32
  },
38
33
  "type": "module",
39
- "version": "0.7.0"
34
+ "version": "0.8.0"
40
35
  }
package/src/css/{badges.scss → badge.scss} RENAMED
@@ -3,9 +3,9 @@
3
3
  display: inline-flex;
4
4
  flex-flow: row nowrap;
5
5
  gap: .5em;
6
- background-color: var(--background, var(--oui-grey-1, #eee));
7
- border: 1px solid var(--border, var(--oui-grey-3, #ccc));
8
- color: var(--foreground, var(--oui-grey-8, #333));
6
+ background-color: var(--background, var(--oui-gray-1));
7
+ border: 1px solid var(--border, var(--oui-gray-3));
8
+ color: var(--foreground, var(--oui-gray-8));
9
9
  line-height: 1.125;
10
10
  }
11
11
 
@@ -33,36 +33,36 @@
33
33
  :where(&-pill-blue, &-tag-blue) {
34
34
  --background: var(--oui-blue-1);
35
35
  --border: var(--oui-blue-3);
36
- --foreground: var(--oui-blue-9);
36
+ --foreground: var(--oui-blue-8);
37
37
  }
38
38
 
39
39
  :where(&-pill-green, &-tag-green) {
40
40
  --background: var(--oui-green-1);
41
41
  --border: var(--oui-green-3);
42
- --foreground: var(--oui-green-9);
42
+ --foreground: var(--oui-green-8);
43
43
  }
44
44
 
45
45
  :where(&-pill-orange, &-tag-orange) {
46
46
  --background: var(--oui-orange-1);
47
47
  --border: var(--oui-orange-3);
48
- --foreground: var(--oui-orange-9);
48
+ --foreground: var(--oui-orange-8);
49
49
  }
50
50
 
51
51
  :where(&-pill-purple, &-tag-purple) {
52
52
  --background: var(--oui-purple-1);
53
53
  --border: var(--oui-purple-3);
54
- --foreground: var(--oui-purple-9);
54
+ --foreground: var(--oui-purple-8);
55
55
  }
56
56
 
57
57
  :where(&-pill-red, &-tag-red) {
58
58
  --background: var(--oui-red-1);
59
59
  --border: var(--oui-red-3);
60
- --foreground: var(--oui-red-9);
60
+ --foreground: var(--oui-red-8);
61
61
  }
62
62
 
63
63
  :where(&-pill-yellow, &-tag-yellow) {
64
64
  --background: var(--oui-yellow-1);
65
65
  --border: var(--oui-yellow-3);
66
- --foreground: var(--oui-yellow-9);
66
+ --foreground: var(--oui-yellow-8);
67
67
  }
68
68
  }
package/src/css/color.scss ADDED
@@ -0,0 +1,113 @@
1
+ @use './mixins' as mixins;
2
+
3
+ :root {
4
+ --oui-absolute: light-dark(white, black);
5
+
6
+ --oui-blue-0: light-dark(oklch(0.98 0.015 260), oklch(0.18 0.1 250));
7
+ --oui-blue-1: light-dark(oklch(0.95 0.03 259), oklch(0.24 0.12 251));
8
+ --oui-blue-2: light-dark(oklch(0.9 0.05 258), oklch(0.32 0.14 252));
9
+ --oui-blue-3: light-dark(oklch(0.83 0.07 257), oklch(0.4 0.16 253));
10
+ --oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.5 0.14 254));
11
+ --oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.6 0.11 255));
12
+ --oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.7 0.09 256));
13
+ --oui-blue-7: light-dark(oklch(0.48 0.16 253), oklch(0.78 0.07 257));
14
+ --oui-blue-8: light-dark(oklch(0.34 0.14 252), oklch(0.85 0.05 258));
15
+ --oui-blue-9: light-dark(oklch(0.22 0.12 251), oklch(0.91 0.03 259));
16
+ --oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.01 260));
17
+
18
+ --oui-green-0: light-dark(oklch(0.98 0.015 150), oklch(0.18 0.1 140));
19
+ --oui-green-1: light-dark(oklch(0.95 0.03 149), oklch(0.24 0.12 141));
20
+ --oui-green-2: light-dark(oklch(0.9 0.05 148), oklch(0.32 0.14 142));
21
+ --oui-green-3: light-dark(oklch(0.83 0.07 147), oklch(0.4 0.15 143));
22
+ --oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.5 0.14 144));
23
+ --oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.6 0.12 145));
24
+ --oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.7 0.09 146));
25
+ --oui-green-7: light-dark(oklch(0.48 0.15 143), oklch(0.78 0.07 147));
26
+ --oui-green-8: light-dark(oklch(0.34 0.14 142), oklch(0.85 0.05 148));
27
+ --oui-green-9: light-dark(oklch(0.22 0.12 141), oklch(0.91 0.03 149));
28
+ --oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
29
+
30
+ --oui-orange-0: light-dark(oklch(0.985 0.02 60), oklch(0.18 0.1 50));
31
+ --oui-orange-1: light-dark(oklch(0.95 0.03 59), oklch(0.24 0.11 51));
32
+ --oui-orange-2: light-dark(oklch(0.9 0.05 58), oklch(0.32 0.12 52));
33
+ --oui-orange-3: light-dark(oklch(0.83 0.08 57), oklch(0.4 0.13 53));
34
+ --oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.5 0.14 54));
35
+ --oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.6 0.13 55));
36
+ --oui-orange-6: light-dark(oklch(0.57 0.14 54), oklch(0.7 0.11 56));
37
+ --oui-orange-7: light-dark(oklch(0.46 0.13 53), oklch(0.78 0.08 57));
38
+ --oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.85 0.05 58));
39
+ --oui-orange-9: light-dark(oklch(0.22 0.11 51), oklch(0.91 0.03 59));
40
+ --oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.97 0.02 60));
41
+
42
+ --oui-purple-0: light-dark(oklch(0.98 0.015 300), oklch(0.18 0.1 290));
43
+ --oui-purple-1: light-dark(oklch(0.95 0.03 299), oklch(0.24 0.11 291));
44
+ --oui-purple-2: light-dark(oklch(0.9 0.05 298), oklch(0.32 0.12 292));
45
+ --oui-purple-3: light-dark(oklch(0.83 0.07 297), oklch(0.4 0.13 293));
46
+ --oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.5 0.12 294));
47
+ --oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.6 0.11 295));
48
+ --oui-purple-6: light-dark(oklch(0.58 0.12 294), oklch(0.7 0.09 296));
49
+ --oui-purple-7: light-dark(oklch(0.48 0.13 293), oklch(0.78 0.07 297));
50
+ --oui-purple-8: light-dark(oklch(0.34 0.12 292), oklch(0.85 0.05 298));
51
+ --oui-purple-9: light-dark(oklch(0.22 0.11 291), oklch(0.91 0.03 299));
52
+ --oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
53
+
54
+ --oui-red-0: light-dark(oklch(0.98 0.015 15), oklch(0.18 0.1 25));
55
+ --oui-red-1: light-dark(oklch(0.95 0.025 16), oklch(0.24 0.125 24));
56
+ --oui-red-2: light-dark(oklch(0.9 0.045 17), oklch(0.32 0.15 23));
57
+ --oui-red-3: light-dark(oklch(0.83 0.08 18), oklch(0.4 0.17 22));
58
+ --oui-red-4: light-dark(oklch(0.75 0.11 19), oklch(0.5 0.16 21));
59
+ --oui-red-5: light-dark(oklch(0.67 0.15 20), oklch(0.6 0.15 20));
60
+ --oui-red-6: light-dark(oklch(0.58 0.16 21), oklch(0.7 0.11 19));
61
+ --oui-red-7: light-dark(oklch(0.48 0.17 22), oklch(0.78 0.08 18));
62
+ --oui-red-8: light-dark(oklch(0.34 0.15 23), oklch(0.85 0.045 17));
63
+ --oui-red-9: light-dark(oklch(0.22 0.125 24), oklch(0.91 0.025 16));
64
+ --oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
65
+
66
+ --oui-yellow-0: light-dark(oklch(0.985 0.02 100), oklch(0.18 0.1 90));
67
+ --oui-yellow-1: light-dark(oklch(0.955 0.04 99), oklch(0.24 0.12 91));
68
+ --oui-yellow-2: light-dark(oklch(0.915 0.08 98), oklch(0.32 0.14 92));
69
+ --oui-yellow-3: light-dark(oklch(0.865 0.12 97), oklch(0.4 0.16 93));
70
+ --oui-yellow-4: light-dark(oklch(0.805 0.14 96), oklch(0.5 0.18 94));
71
+ --oui-yellow-5: light-dark(oklch(0.735 0.16 95), oklch(0.6 0.16 95));
72
+ --oui-yellow-6: light-dark(oklch(0.635 0.18 94), oklch(0.7 0.14 96));
73
+ --oui-yellow-7: light-dark(oklch(0.515 0.16 93), oklch(0.78 0.12 97));
74
+ --oui-yellow-8: light-dark(oklch(0.385 0.14 92), oklch(0.85 0.08 98));
75
+ --oui-yellow-9: light-dark(oklch(0.255 0.12 91), oklch(0.91 0.04 99));
76
+ --oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.97 0.02 100));
77
+
78
+ --oui-gray-0: light-dark(oklch(0.99 0 0), oklch(0.18 0 0));
79
+ --oui-gray-1: light-dark(oklch(0.97 0 0), oklch(0.24 0 0));
80
+ --oui-gray-2: light-dark(oklch(0.94 0 0), oklch(0.32 0 0));
81
+ --oui-gray-3: light-dark(oklch(0.88 0 0), oklch(0.4 0 0));
82
+ --oui-gray-4: light-dark(oklch(0.78 0 0), oklch(0.5 0 0));
83
+ --oui-gray-5: light-dark(oklch(0.67 0 0), oklch(0.6 0 0));
84
+ --oui-gray-6: light-dark(oklch(0.58 0 0), oklch(0.7 0 0));
85
+ --oui-gray-7: light-dark(oklch(0.48 0 0), oklch(0.78 0 0));
86
+ --oui-gray-8: light-dark(oklch(0.34 0 0), oklch(0.85 0 0));
87
+ --oui-gray-9: light-dark(oklch(0.22 0 0), oklch(0.91 0 0));
88
+ --oui-gray-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
89
+
90
+ --oui-slate-0: light-dark(oklch(0.99 0.0033 255), oklch(0.18 0.005 255));
91
+ --oui-slate-1: light-dark(oklch(0.97 0.0067 255), oklch(0.24 0.0075 255));
92
+ --oui-slate-2: light-dark(oklch(0.94 0.01 255), oklch(0.32 0.01 255));
93
+ --oui-slate-3: light-dark(oklch(0.88 0.0125 255), oklch(0.4 0.0125 255));
94
+ --oui-slate-4: light-dark(oklch(0.78 0.015 255), oklch(0.5 0.015 255));
95
+ --oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.6 0.02 255));
96
+ --oui-slate-6: light-dark(oklch(0.58 0.015 255), oklch(0.7 0.015 255));
97
+ --oui-slate-7: light-dark(oklch(0.48 0.0125 255), oklch(0.78 0.0125 255));
98
+ --oui-slate-8: light-dark(oklch(0.34 0.01 255), oklch(0.85 0.01 255));
99
+ --oui-slate-9: light-dark(oklch(0.22 0.0075 255), oklch(0.91 0.0075 255));
100
+ --oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
101
+
102
+ --oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.18 0.005 95));
103
+ --oui-stone-1: light-dark(oklch(0.97 0.0067 95), oklch(0.24 0.0075 95));
104
+ --oui-stone-2: light-dark(oklch(0.94 0.01 95), oklch(0.32 0.01 95));
105
+ --oui-stone-3: light-dark(oklch(0.88 0.0125 95), oklch(0.4 0.0125 95));
106
+ --oui-stone-4: light-dark(oklch(0.78 0.015 95), oklch(0.5 0.015 95));
107
+ --oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.6 0.02 95));
108
+ --oui-stone-6: light-dark(oklch(0.58 0.015 95), oklch(0.7 0.015 95));
109
+ --oui-stone-7: light-dark(oklch(0.48 0.0125 95), oklch(0.78 0.0125 95));
110
+ --oui-stone-8: light-dark(oklch(0.34 0.01 95), oklch(0.85 0.01 95));
111
+ --oui-stone-9: light-dark(oklch(0.22 0.0075 95), oklch(0.91 0.0075 95));
112
+ --oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
113
+ }
package/src/css/form.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  :where(.oui-fieldset) {
4
4
  padding: 1em;
5
- border: 1px solid var(--oui-grey-3);
5
+ border: 1px solid var(--oui-gray-3);
6
6
  border-radius: 0.25em;
7
7
  }
8
8
 
@@ -12,10 +12,10 @@
12
12
  outline: 3px solid transparent;
13
13
  outline-offset: 0;
14
14
  background-color: var(--oui-absolute);
15
- border-color: var(--oui-grey-3);
15
+ border-color: var(--oui-gray-3);
16
16
  border-radius: 0.25em;
17
17
  box-shadow: inset 0 1px 2px 0
18
- color-mix(in srgb, var(--oui-grey-10), transparent 80%);
18
+ color-mix(in oklab, var(--oui-gray-10), transparent 80%);
19
19
  transition: 0.125s ease-in-out;
20
20
  }
21
21
 
@@ -46,7 +46,7 @@
46
46
  [aria-invalid='true']
47
47
  )
48
48
  ) {
49
- outline-color: color-mix(in srgb, var(--oui-red-6), transparent 60%);
49
+ outline-color: color-mix(in oklab, var(--oui-red-6), transparent 60%);
50
50
  border-color: var(--oui-red-6);
51
51
  }
52
52
 
@@ -56,29 +56,29 @@
56
56
  [aria-invalid='false']
57
57
  )
58
58
  ) {
59
- outline-color: color-mix(in srgb, var(--oui-green-6), transparent 60%);
59
+ outline-color: color-mix(in oklab, var(--oui-green-6), transparent 60%);
60
60
  border-color: var(--oui-green-6);
61
61
  }
62
62
 
63
63
  :where(&:not([disabled], [aria-disabled='true']):focus) {
64
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
64
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
65
65
  border-color: var(--oui-blue-6);
66
66
  }
67
67
 
68
68
  @media (hover: hover) {
69
69
  :where(&:not([disabled], [aria-disabled='true']):hover) {
70
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
70
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
71
71
  border-color: var(--oui-blue-6);
72
72
  }
73
73
  }
74
74
 
75
75
  :where(&[readonly]) {
76
- color: color-mix(in srgb, currentColor, transparent 12.5%);
76
+ color: color-mix(in oklab, currentColor, transparent 12.5%);
77
77
  }
78
78
 
79
79
  :where(&[disabled], &[aria-disabled='true']) {
80
- background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
81
- color: color-mix(in srgb, currentColor, transparent 25%);
80
+ background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
81
+ color: color-mix(in oklab, currentColor, transparent 25%);
82
82
  }
83
83
  }
84
84
 
@@ -104,7 +104,7 @@
104
104
 
105
105
  :where(.oui-legend) {
106
106
  padding: 0.5em;
107
- border: 1px solid var(--oui-grey-3);
107
+ border: 1px solid var(--oui-gray-3);
108
108
  border-radius: 0.25em;
109
109
  }
110
110
 
@@ -135,8 +135,8 @@
135
135
  width: 2.5em;
136
136
  height: 1.5em;
137
137
  display: inline-block;
138
- background-color: var(--oui-grey-0);
139
- border: 1px solid var(--oui-grey-3);
138
+ background-color: var(--oui-gray-0);
139
+ border: 1px solid var(--oui-gray-3);
140
140
  border-radius: 3em;
141
141
  right: 0;
142
142
  }
@@ -148,7 +148,7 @@
148
148
  background-color: var(--oui-absolute);
149
149
  border-radius: 1.5em;
150
150
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
151
- color: var(--oui-grey-8);
151
+ color: var(--oui-gray-8);
152
152
  font-size: 0.75em;
153
153
  font-weight: bold;
154
154
  line-height: 1.5em;
@@ -178,7 +178,7 @@
178
178
  height: 1.5em;
179
179
  display: inline-block;
180
180
  background-color: transparent;
181
- border: 1px solid var(--oui-grey-4);
181
+ border: 1px solid var(--oui-gray-4);
182
182
  inset: 0 auto auto 0;
183
183
  }
184
184
 
@@ -241,7 +241,7 @@
241
241
  color: var(--oui-blue-8);
242
242
 
243
243
  &::before {
244
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
244
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 60%);
245
245
  border-color: var(--oui-absolute);
246
246
  }
247
247
  }
@@ -251,7 +251,7 @@
251
251
  color: var(--oui-blue-8);
252
252
 
253
253
  &::before {
254
- outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
254
+ outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 80%);
255
255
  border-color: var(--oui-blue-6);
256
256
  }
257
257
  }
@@ -259,25 +259,28 @@
259
259
  :where(
260
260
  &:has(input:not([disabled], [aria-disabled='true']):is(:checked)):hover
261
261
  )::before {
262
- background-color: color-mix(in srgb, var(--oui-blue-6), transparent 40%);
262
+ background-color: color-mix(in oklab, var(--oui-blue-6), transparent 40%);
263
263
  }
264
264
  }
265
265
 
266
266
  :where(&:has(input[disabled], input[aria-disabled='true'])) {
267
267
  cursor: default;
268
268
 
269
- &,
269
+ & {
270
+ color: color-mix(in oklab, currentColor, transparent 25%);
271
+ }
272
+
270
273
  &::after {
271
- color: color-mix(in srgb, currentColor, transparent 25%);
274
+ color: color-mix(in oklab, currentColor, transparent);
272
275
  }
273
276
 
274
277
  &::before {
275
- background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
276
- border-color: var(--oui-grey-3);
278
+ background-color: color-mix(in oklab, var(--oui-gray-0), transparent 50%);
279
+ border-color: var(--oui-gray-3);
277
280
  }
278
281
 
279
282
  &::after {
280
- box-shadow: 0 0 0 1px var(--oui-grey-3);
283
+ box-shadow: 0 0 0 1px var(--oui-gray-3);
281
284
  text-shadow: none;
282
285
  }
283
286
  }
package/src/css/message.scss CHANGED
@@ -4,10 +4,10 @@
4
4
  display: inline-flex;
5
5
  flex-flow: column nowrap;
6
6
  gap: 1em;
7
- background-color: var(--background, var(--oui-grey-0, #eee));
8
- border: 1px solid var(--border, var(--oui-grey-2, #ccc));
7
+ background-color: var(--background, var(--oui-gray-0));
8
+ border: 1px solid var(--border, var(--oui-gray-2));
9
9
  border-radius: .5em;
10
- color: var(--foreground, var(--oui-grey-8, #333));
10
+ color: var(--foreground, var(--oui-gray-8));
11
11
  line-height: 1.25;
12
12
  }
13
13
 
@@ -19,7 +19,7 @@
19
19
  :where(& hr) {
20
20
  height: 1px;
21
21
  margin: 0 -1em;
22
- background-color: var(--border, var(--oui-grey-2));
22
+ background-color: var(--border, var(--oui-gray-2));
23
23
  border: none;
24
24
  }
25
25
 
package/src/css/mixins.scss CHANGED
@@ -1,59 +1,3 @@
1
- @mixin colour($name, $zero, $six, $ten, $dark-zero, $dark-six, $dark-ten) {
2
- & {
3
- --oui-#{$name}-0: #{$zero};
4
- --oui-#{$name}-1: color-mix(
5
- in srgb,
6
- var(--oui-#{$name}-0),
7
- var(--oui-#{$name}-6) 5%
8
- );
9
- --oui-#{$name}-2: color-mix(
10
- in srgb,
11
- var(--oui-#{$name}-0),
12
- var(--oui-#{$name}-6) 15%
13
- );
14
- --oui-#{$name}-3: color-mix(
15
- in srgb,
16
- var(--oui-#{$name}-0),
17
- var(--oui-#{$name}-6) 30%
18
- );
19
- --oui-#{$name}-4: color-mix(
20
- in srgb,
21
- var(--oui-#{$name}-0),
22
- var(--oui-#{$name}-6) 50%
23
- );
24
- --oui-#{$name}-5: color-mix(
25
- in srgb,
26
- var(--oui-#{$name}-0),
27
- var(--oui-#{$name}-6) 75%
28
- );
29
- --oui-#{$name}-6: #{$six};
30
- --oui-#{$name}-7: color-mix(
31
- in srgb,
32
- var(--oui-#{$name}-10),
33
- var(--oui-#{$name}-6) 75%
34
- );
35
- --oui-#{$name}-8: color-mix(
36
- in srgb,
37
- var(--oui-#{$name}-10),
38
- var(--oui-#{$name}-6) 50%
39
- );
40
- --oui-#{$name}-9: color-mix(
41
- in srgb,
42
- var(--oui-#{$name}-10),
43
- var(--oui-#{$name}-6) 25%
44
- );
45
- --oui-#{$name}-10: #{$ten};
46
-
47
- @media (prefers-color-scheme: dark) {
48
- & {
49
- --oui-#{$name}-0: #{$dark-zero};
50
- --oui-#{$name}-6: #{$dark-six};
51
- --oui-#{$name}-10: #{$dark-ten};
52
- }
53
- }
54
- }
55
- }
56
-
57
1
  @mixin visuallyHidden() {
58
2
  width: 1px !important;
59
3
  height: 1px !important;
package/src/css/table.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  :where(&-wrapper) {
7
7
  max-height: 32em;
8
8
  overflow: auto;
9
- border: 1px solid var(--oui-grey-3);
9
+ border: 1px solid var(--oui-gray-3);
10
10
  border-radius: .25em;
11
11
  position: relative;
12
12
  overscroll-behavior-y: none;
@@ -15,8 +15,8 @@
15
15
  :where(& caption) {
16
16
  height: 2rem;
17
17
  align-content: center;
18
- background-color: var(--oui-grey-1);
19
- border: solid var(--oui-grey-3);
18
+ background-color: var(--oui-gray-1);
19
+ border: solid var(--oui-gray-3);
20
20
  border-width: 0 0 1px 0;
21
21
  font-size: .875rem;
22
22
  text-align: left;
@@ -27,12 +27,12 @@
27
27
  }
28
28
 
29
29
  :where(& tbody tr:nth-child(2n)) {
30
- background-color: var(--oui-blue-0);
30
+ background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
31
31
  }
32
32
 
33
33
  :where(& th, & tfoot td) {
34
- background-color: var(--oui-grey-1);
35
- border: solid var(--oui-grey-3);
34
+ background-color: var(--oui-gray-1);
35
+ border: solid var(--oui-gray-3);
36
36
  border-width: 0 1px 0 0;
37
37
  position: sticky;
38
38
  left: 0;
@@ -40,7 +40,7 @@
40
40
 
41
41
  &::after {
42
42
  content: '';
43
- border-bottom: 1px solid var(--oui-grey-3);
43
+ border-bottom: 1px solid var(--oui-gray-3);
44
44
  position: absolute;
45
45
  }
46
46
  }
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  :where(& tbody td) {
69
- border: solid var(--oui-grey-3);
69
+ border: solid var(--oui-gray-3);
70
70
  border-width: 0 1px 1px 0;
71
71
  }
72
72
 
package/dist/css/colours.css DELETED
@@ -1,102 +0,0 @@
1
- :root {
2
- --oui-absolute: light-dark(white, black);
3
- --oui-blue-0: light-dark(oklch(0.97 0.01 260), oklch(0.18 0.1 250));
4
- --oui-blue-1: light-dark(oklch(0.94 0.03 259), oklch(0.24 0.12 251));
5
- --oui-blue-2: light-dark(oklch(0.88 0.05 258), oklch(0.36 0.14 252));
6
- --oui-blue-3: light-dark(oklch(0.82 0.07 257), oklch(0.48 0.18 253));
7
- --oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.58 0.18 254));
8
- --oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.67 0.14 255));
9
- --oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.75 0.11 256));
10
- --oui-blue-7: light-dark(oklch(0.48 0.18 253), oklch(0.82 0.09 257));
11
- --oui-blue-8: light-dark(oklch(0.36 0.14 252), oklch(0.88 0.07 258));
12
- --oui-blue-9: light-dark(oklch(0.24 0.12 251), oklch(0.94 0.05 259));
13
- --oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.03 260));
14
- --oui-green-0: light-dark(oklch(0.97 0.01 150), oklch(0.18 0.1 140));
15
- --oui-green-1: light-dark(oklch(0.94 0.03 149), oklch(0.24 0.12 141));
16
- --oui-green-2: light-dark(oklch(0.88 0.05 148), oklch(0.36 0.14 142));
17
- --oui-green-3: light-dark(oklch(0.82 0.07 147), oklch(0.48 0.16 143));
18
- --oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.58 0.14 144));
19
- --oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.67 0.13 145));
20
- --oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.75 0.11 146));
21
- --oui-green-7: light-dark(oklch(0.48 0.16 143), oklch(0.82 0.07 147));
22
- --oui-green-8: light-dark(oklch(0.36 0.14 142), oklch(0.88 0.05 148));
23
- --oui-green-9: light-dark(oklch(0.24 0.12 141), oklch(0.94 0.03 149));
24
- --oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
25
- --oui-orange-0: light-dark(oklch(0.975 0.02 60), oklch(0.1875 0.1 50));
26
- --oui-orange-1: light-dark(oklch(0.94 0.03 59), oklch(0.255 0.125 51));
27
- --oui-orange-2: light-dark(oklch(0.88 0.05 58), oklch(0.385 0.15 52));
28
- --oui-orange-3: light-dark(oklch(0.82 0.08 57), oklch(0.515 0.18 53));
29
- --oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.635 0.2 54));
30
- --oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.735 0.18 55));
31
- --oui-orange-6: light-dark(oklch(0.57 0.16 54), oklch(0.795 0.14 56));
32
- --oui-orange-7: light-dark(oklch(0.46 0.15 53), oklch(0.855 0.12 57));
33
- --oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.905 0.08 58));
34
- --oui-orange-9: light-dark(oklch(0.24 0.11 51), oklch(0.945 0.04 59));
35
- --oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.975 0.02 60));
36
- --oui-purple-0: light-dark(oklch(0.97 0.01 300), oklch(0.18 0.1 290));
37
- --oui-purple-1: light-dark(oklch(0.94 0.03 299), oklch(0.24 0.12 291));
38
- --oui-purple-2: light-dark(oklch(0.88 0.05 298), oklch(0.36 0.13 292));
39
- --oui-purple-3: light-dark(oklch(0.82 0.07 297), oklch(0.48 0.15 293));
40
- --oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.58 0.13 294));
41
- --oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.67 0.11 295));
42
- --oui-purple-6: light-dark(oklch(0.58 0.13 294), oklch(0.75 0.09 296));
43
- --oui-purple-7: light-dark(oklch(0.48 0.15 293), oklch(0.82 0.07 297));
44
- --oui-purple-8: light-dark(oklch(0.36 0.13 292), oklch(0.88 0.05 298));
45
- --oui-purple-9: light-dark(oklch(0.24 0.12 291), oklch(0.94 0.03 299));
46
- --oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
47
- --oui-red-0: light-dark(oklch(0.97 0.01 15), oklch(0.18 0.1 25));
48
- --oui-red-1: light-dark(oklch(0.94 0.03 16), oklch(0.24 0.125 24));
49
- --oui-red-2: light-dark(oklch(0.88 0.05 17), oklch(0.36 0.15 23));
50
- --oui-red-3: light-dark(oklch(0.82 0.07 18), oklch(0.48 0.18 22));
51
- --oui-red-4: light-dark(oklch(0.75 0.09 19), oklch(0.58 0.14 21));
52
- --oui-red-5: light-dark(oklch(0.67 0.11 20), oklch(0.67 0.11 20));
53
- --oui-red-6: light-dark(oklch(0.58 0.14 21), oklch(0.75 0.09 19));
54
- --oui-red-7: light-dark(oklch(0.48 0.18 22), oklch(0.82 0.07 18));
55
- --oui-red-8: light-dark(oklch(0.36 0.15 23), oklch(0.88 0.05 17));
56
- --oui-red-9: light-dark(oklch(0.24 0.125 24), oklch(0.94 0.03 16));
57
- --oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
58
- --oui-yellow-0: light-dark(oklch(0.975 0.02 100), oklch(0.1875 0.1 90));
59
- --oui-yellow-1: light-dark(oklch(0.945 0.04 99), oklch(0.255 0.125 91));
60
- --oui-yellow-2: light-dark(oklch(0.905 0.08 98), oklch(0.385 0.15 92));
61
- --oui-yellow-3: light-dark(oklch(0.855 0.12 97), oklch(0.515 0.18 93));
62
- --oui-yellow-4: light-dark(oklch(0.795 0.14 96), oklch(0.635 0.2 94));
63
- --oui-yellow-5: light-dark(oklch(0.735 0.18 95), oklch(0.735 0.18 95));
64
- --oui-yellow-6: light-dark(oklch(0.635 0.2 94), oklch(0.795 0.14 96));
65
- --oui-yellow-7: light-dark(oklch(0.515 0.18 93), oklch(0.855 0.12 97));
66
- --oui-yellow-8: light-dark(oklch(0.385 0.15 92), oklch(0.905 0.08 98));
67
- --oui-yellow-9: light-dark(oklch(0.255 0.125 91), oklch(0.945 0.04 99));
68
- --oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.975 0.02 100));
69
- --oui-grey-0: light-dark(oklch(0.97 0 0), oklch(0.18 0 0));
70
- --oui-grey-1: light-dark(oklch(0.94 0 0), oklch(0.24 0 0));
71
- --oui-grey-2: light-dark(oklch(0.88 0 0), oklch(0.36 0 0));
72
- --oui-grey-3: light-dark(oklch(0.82 0 0), oklch(0.48 0 0));
73
- --oui-grey-4: light-dark(oklch(0.75 0 0), oklch(0.58 0 0));
74
- --oui-grey-5: light-dark(oklch(0.67 0 0), oklch(0.67 0 0));
75
- --oui-grey-6: light-dark(oklch(0.58 0 0), oklch(0.75 0 0));
76
- --oui-grey-7: light-dark(oklch(0.48 0 0), oklch(0.82 0 0));
77
- --oui-grey-8: light-dark(oklch(0.36 0 0), oklch(0.88 0 0));
78
- --oui-grey-9: light-dark(oklch(0.24 0 0), oklch(0.94 0 0));
79
- --oui-grey-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
80
- --oui-slate-0: light-dark(oklch(0.97 0.005 255), oklch(0.18 0.005 255));
81
- --oui-slate-1: light-dark(oklch(0.94 0.005 255), oklch(0.24 0.005 255));
82
- --oui-slate-2: light-dark(oklch(0.88 0.01 255), oklch(0.36 0.01 255));
83
- --oui-slate-3: light-dark(oklch(0.82 0.01 255), oklch(0.48 0.01 255));
84
- --oui-slate-4: light-dark(oklch(0.75 0.02 255), oklch(0.58 0.02 255));
85
- --oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.67 0.02 255));
86
- --oui-slate-6: light-dark(oklch(0.58 0.02 255), oklch(0.75 0.02 255));
87
- --oui-slate-7: light-dark(oklch(0.48 0.01 255), oklch(0.82 0.01 255));
88
- --oui-slate-8: light-dark(oklch(0.36 0.01 255), oklch(0.88 0.01 255));
89
- --oui-slate-9: light-dark(oklch(0.24 0.005 255), oklch(0.94 0.005 255));
90
- --oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
91
- --oui-stone-0: light-dark(oklch(0.97 0.005 95), oklch(0.18 0.005 95));
92
- --oui-stone-1: light-dark(oklch(0.94 0.005 95), oklch(0.24 0.005 95));
93
- --oui-stone-2: light-dark(oklch(0.9 0.01 95), oklch(0.36 0.01 95));
94
- --oui-stone-3: light-dark(oklch(0.82 0.01 95), oklch(0.48 0.01 95));
95
- --oui-stone-4: light-dark(oklch(0.75 0.02 95), oklch(0.58 0.02 95));
96
- --oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.67 0.02 95));
97
- --oui-stone-6: light-dark(oklch(0.58 0.02 95), oklch(0.75 0.02 95));
98
- --oui-stone-7: light-dark(oklch(0.48 0.01 95), oklch(0.82 0.01 95));
99
- --oui-stone-8: light-dark(oklch(0.36 0.01 95), oklch(0.9 0.01 95));
100
- --oui-stone-9: light-dark(oklch(0.24 0.005 95), oklch(0.94 0.005 95));
101
- --oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
102
- }
package/src/css/colours.scss DELETED
@@ -1,113 +0,0 @@
1
- @use './mixins' as mixins;
2
-
3
- :root {
4
- --oui-absolute: light-dark(white, black);
5
-
6
- --oui-blue-0: light-dark(oklch(0.97 0.01 260), oklch(0.18 0.1 250));
7
- --oui-blue-1: light-dark(oklch(0.94 0.03 259), oklch(0.24 0.12 251));
8
- --oui-blue-2: light-dark(oklch(0.88 0.05 258), oklch(0.36 0.14 252));
9
- --oui-blue-3: light-dark(oklch(0.82 0.07 257), oklch(0.48 0.18 253));
10
- --oui-blue-4: light-dark(oklch(0.75 0.09 256), oklch(0.58 0.18 254));
11
- --oui-blue-5: light-dark(oklch(0.67 0.11 255), oklch(0.67 0.14 255));
12
- --oui-blue-6: light-dark(oklch(0.58 0.14 254), oklch(0.75 0.11 256));
13
- --oui-blue-7: light-dark(oklch(0.48 0.18 253), oklch(0.82 0.09 257));
14
- --oui-blue-8: light-dark(oklch(0.36 0.14 252), oklch(0.88 0.07 258));
15
- --oui-blue-9: light-dark(oklch(0.24 0.12 251), oklch(0.94 0.05 259));
16
- --oui-blue-10: light-dark(oklch(0.18 0.1 250), oklch(0.97 0.03 260));
17
-
18
- --oui-green-0: light-dark(oklch(0.97 0.01 150), oklch(0.18 0.1 140));
19
- --oui-green-1: light-dark(oklch(0.94 0.03 149), oklch(0.24 0.12 141));
20
- --oui-green-2: light-dark(oklch(0.88 0.05 148), oklch(0.36 0.14 142));
21
- --oui-green-3: light-dark(oklch(0.82 0.07 147), oklch(0.48 0.16 143));
22
- --oui-green-4: light-dark(oklch(0.75 0.09 146), oklch(0.58 0.14 144));
23
- --oui-green-5: light-dark(oklch(0.67 0.11 145), oklch(0.67 0.13 145));
24
- --oui-green-6: light-dark(oklch(0.58 0.14 144), oklch(0.75 0.11 146));
25
- --oui-green-7: light-dark(oklch(0.48 0.16 143), oklch(0.82 0.07 147));
26
- --oui-green-8: light-dark(oklch(0.36 0.14 142), oklch(0.88 0.05 148));
27
- --oui-green-9: light-dark(oklch(0.24 0.12 141), oklch(0.94 0.03 149));
28
- --oui-green-10: light-dark(oklch(0.18 0.1 140), oklch(0.97 0.01 150));
29
-
30
- --oui-orange-0: light-dark(oklch(0.975 0.02 60), oklch(0.1875 0.1 50));
31
- --oui-orange-1: light-dark(oklch(0.94 0.03 59), oklch(0.255 0.125 51));
32
- --oui-orange-2: light-dark(oklch(0.88 0.05 58), oklch(0.385 0.15 52));
33
- --oui-orange-3: light-dark(oklch(0.82 0.08 57), oklch(0.515 0.18 53));
34
- --oui-orange-4: light-dark(oklch(0.75 0.11 56), oklch(0.635 0.2 54));
35
- --oui-orange-5: light-dark(oklch(0.67 0.13 55), oklch(0.735 0.18 55));
36
- --oui-orange-6: light-dark(oklch(0.57 0.16 54), oklch(0.795 0.14 56));
37
- --oui-orange-7: light-dark(oklch(0.46 0.15 53), oklch(0.855 0.12 57));
38
- --oui-orange-8: light-dark(oklch(0.34 0.12 53), oklch(0.905 0.08 58));
39
- --oui-orange-9: light-dark(oklch(0.24 0.11 51), oklch(0.945 0.04 59));
40
- --oui-orange-10: light-dark(oklch(0.18 0.1 50), oklch(0.975 0.02 60));
41
-
42
- --oui-purple-0: light-dark(oklch(0.97 0.01 300), oklch(0.18 0.1 290));
43
- --oui-purple-1: light-dark(oklch(0.94 0.03 299), oklch(0.24 0.12 291));
44
- --oui-purple-2: light-dark(oklch(0.88 0.05 298), oklch(0.36 0.13 292));
45
- --oui-purple-3: light-dark(oklch(0.82 0.07 297), oklch(0.48 0.15 293));
46
- --oui-purple-4: light-dark(oklch(0.75 0.09 296), oklch(0.58 0.13 294));
47
- --oui-purple-5: light-dark(oklch(0.67 0.11 295), oklch(0.67 0.11 295));
48
- --oui-purple-6: light-dark(oklch(0.58 0.13 294), oklch(0.75 0.09 296));
49
- --oui-purple-7: light-dark(oklch(0.48 0.15 293), oklch(0.82 0.07 297));
50
- --oui-purple-8: light-dark(oklch(0.36 0.13 292), oklch(0.88 0.05 298));
51
- --oui-purple-9: light-dark(oklch(0.24 0.12 291), oklch(0.94 0.03 299));
52
- --oui-purple-10: light-dark(oklch(0.18 0.1 290), oklch(0.97 0.01 300));
53
-
54
- --oui-red-0: light-dark(oklch(0.97 0.01 15), oklch(0.18 0.1 25));
55
- --oui-red-1: light-dark(oklch(0.94 0.03 16), oklch(0.24 0.125 24));
56
- --oui-red-2: light-dark(oklch(0.88 0.05 17), oklch(0.36 0.15 23));
57
- --oui-red-3: light-dark(oklch(0.82 0.07 18), oklch(0.48 0.18 22));
58
- --oui-red-4: light-dark(oklch(0.75 0.09 19), oklch(0.58 0.14 21));
59
- --oui-red-5: light-dark(oklch(0.67 0.11 20), oklch(0.67 0.11 20));
60
- --oui-red-6: light-dark(oklch(0.58 0.14 21), oklch(0.75 0.09 19));
61
- --oui-red-7: light-dark(oklch(0.48 0.18 22), oklch(0.82 0.07 18));
62
- --oui-red-8: light-dark(oklch(0.36 0.15 23), oklch(0.88 0.05 17));
63
- --oui-red-9: light-dark(oklch(0.24 0.125 24), oklch(0.94 0.03 16));
64
- --oui-red-10: light-dark(oklch(0.18 0.1 25), oklch(0.97 0.01 15));
65
-
66
- --oui-yellow-0: light-dark(oklch(0.975 0.02 100), oklch(0.1875 0.1 90));
67
- --oui-yellow-1: light-dark(oklch(0.945 0.04 99), oklch(0.255 0.125 91));
68
- --oui-yellow-2: light-dark(oklch(0.905 0.08 98), oklch(0.385 0.15 92));
69
- --oui-yellow-3: light-dark(oklch(0.855 0.12 97), oklch(0.515 0.18 93));
70
- --oui-yellow-4: light-dark(oklch(0.795 0.14 96), oklch(0.635 0.2 94));
71
- --oui-yellow-5: light-dark(oklch(0.735 0.18 95), oklch(0.735 0.18 95));
72
- --oui-yellow-6: light-dark(oklch(0.635 0.2 94), oklch(0.795 0.14 96));
73
- --oui-yellow-7: light-dark(oklch(0.515 0.18 93), oklch(0.855 0.12 97));
74
- --oui-yellow-8: light-dark(oklch(0.385 0.15 92), oklch(0.905 0.08 98));
75
- --oui-yellow-9: light-dark(oklch(0.255 0.125 91), oklch(0.945 0.04 99));
76
- --oui-yellow-10: light-dark(oklch(0.1875 0.1 90), oklch(0.975 0.02 100));
77
-
78
- --oui-grey-0: light-dark(oklch(0.97 0 0), oklch(0.18 0 0));
79
- --oui-grey-1: light-dark(oklch(0.94 0 0), oklch(0.24 0 0));
80
- --oui-grey-2: light-dark(oklch(0.88 0 0), oklch(0.36 0 0));
81
- --oui-grey-3: light-dark(oklch(0.82 0 0), oklch(0.48 0 0));
82
- --oui-grey-4: light-dark(oklch(0.75 0 0), oklch(0.58 0 0));
83
- --oui-grey-5: light-dark(oklch(0.67 0 0), oklch(0.67 0 0));
84
- --oui-grey-6: light-dark(oklch(0.58 0 0), oklch(0.75 0 0));
85
- --oui-grey-7: light-dark(oklch(0.48 0 0), oklch(0.82 0 0));
86
- --oui-grey-8: light-dark(oklch(0.36 0 0), oklch(0.88 0 0));
87
- --oui-grey-9: light-dark(oklch(0.24 0 0), oklch(0.94 0 0));
88
- --oui-grey-10: light-dark(oklch(0.18 0 0), oklch(0.97 0 0));
89
-
90
- --oui-slate-0: light-dark(oklch(0.97 0.005 255), oklch(0.18 0.005 255));
91
- --oui-slate-1: light-dark(oklch(0.94 0.005 255), oklch(0.24 0.005 255));
92
- --oui-slate-2: light-dark(oklch(0.88 0.01 255), oklch(0.36 0.01 255));
93
- --oui-slate-3: light-dark(oklch(0.82 0.01 255), oklch(0.48 0.01 255));
94
- --oui-slate-4: light-dark(oklch(0.75 0.02 255), oklch(0.58 0.02 255));
95
- --oui-slate-5: light-dark(oklch(0.67 0.02 255), oklch(0.67 0.02 255));
96
- --oui-slate-6: light-dark(oklch(0.58 0.02 255), oklch(0.75 0.02 255));
97
- --oui-slate-7: light-dark(oklch(0.48 0.01 255), oklch(0.82 0.01 255));
98
- --oui-slate-8: light-dark(oklch(0.36 0.01 255), oklch(0.88 0.01 255));
99
- --oui-slate-9: light-dark(oklch(0.24 0.005 255), oklch(0.94 0.005 255));
100
- --oui-slate-10: light-dark(oklch(0.18 0.005 255), oklch(0.97 0.005 255));
101
-
102
- --oui-stone-0: light-dark(oklch(0.97 0.005 95), oklch(0.18 0.005 95));
103
- --oui-stone-1: light-dark(oklch(0.94 0.005 95), oklch(0.24 0.005 95));
104
- --oui-stone-2: light-dark(oklch(0.9 0.01 95), oklch(0.36 0.01 95));
105
- --oui-stone-3: light-dark(oklch(0.82 0.01 95), oklch(0.48 0.01 95));
106
- --oui-stone-4: light-dark(oklch(0.75 0.02 95), oklch(0.58 0.02 95));
107
- --oui-stone-5: light-dark(oklch(0.67 0.02 95), oklch(0.67 0.02 95));
108
- --oui-stone-6: light-dark(oklch(0.58 0.02 95), oklch(0.75 0.02 95));
109
- --oui-stone-7: light-dark(oklch(0.48 0.01 95), oklch(0.82 0.01 95));
110
- --oui-stone-8: light-dark(oklch(0.36 0.01 95), oklch(0.9 0.01 95));
111
- --oui-stone-9: light-dark(oklch(0.24 0.005 95), oklch(0.94 0.005 95));
112
- --oui-stone-10: light-dark(oklch(0.18 0.005 95), oklch(0.97 0.005 95));
113
- }