@oscarpalmer/oui 0.8.0 → 0.10.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 (27) hide show
  1. package/dist/css/a11y.css +3 -0
  2. package/dist/css/badge.css +30 -22
  3. package/dist/css/button.css +89 -0
  4. package/dist/css/color.css +103 -99
  5. package/dist/css/flex.css +2 -0
  6. package/dist/css/form.css +354 -52
  7. package/dist/css/message.css +30 -22
  8. package/dist/css/reset.css +66 -50
  9. package/dist/css/table.css +4 -1
  10. package/dist/js/focus-trap.cjs +147 -0
  11. package/dist/js/focus-trap.js +146 -0
  12. package/dist/js/index.cjs +2 -0
  13. package/dist/js/index.js +1 -0
  14. package/package.json +59 -6
  15. package/src/css/badge.scss +33 -22
  16. package/src/css/button.scss +121 -0
  17. package/src/css/color.scss +101 -99
  18. package/src/css/form.scss +233 -60
  19. package/src/css/message.scss +36 -23
  20. package/src/css/reset.scss +12 -17
  21. package/src/css/table.scss +3 -1
  22. package/src/js/focus-trap.ts +181 -0
  23. package/src/js/index.ts +1 -0
  24. package/types/focus-trap.d.cts +3 -0
  25. package/types/focus-trap.d.ts +1 -0
  26. package/types/index.d.cts +3 -0
  27. package/types/index.d.ts +1 -0
package/src/css/badge.scss CHANGED
@@ -1,12 +1,23 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
1
3
  .oui {
2
4
  :where(&-pill, &-tag) {
5
+ --oui-shadow-value: color-mix(
6
+ in oklch,
7
+ var(--oui-shadow, var(--oui-gray-6)),
8
+ transparent 95%
9
+ );
10
+
3
11
  display: inline-flex;
4
12
  flex-flow: row nowrap;
5
13
  gap: .5em;
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
- line-height: 1.125;
14
+ background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
15
+ box-shadow:
16
+ 0 0 0 1px var(--oui-shadow-value),
17
+ 0 1px 2px 0 var(--oui-shadow-value),
18
+ 0 2px 4px 0 var(--oui-shadow-value);
19
+ color: var(--oui-foreground, var(--oui-gray-8));
20
+ line-height: 1.25;
10
21
  }
11
22
 
12
23
  :where(&-pill) {
@@ -31,38 +42,38 @@
31
42
  }
32
43
 
33
44
  :where(&-pill-blue, &-tag-blue) {
34
- --background: var(--oui-blue-1);
35
- --border: var(--oui-blue-3);
36
- --foreground: var(--oui-blue-8);
45
+ --oui-background: var(--oui-blue-0);
46
+ --oui-foreground: var(--oui-blue-8);
47
+ --oui-shadow: var(--oui-blue-6);
37
48
  }
38
49
 
39
50
  :where(&-pill-green, &-tag-green) {
40
- --background: var(--oui-green-1);
41
- --border: var(--oui-green-3);
42
- --foreground: var(--oui-green-8);
51
+ --oui-background: var(--oui-green-0);
52
+ --oui-foreground: var(--oui-green-8);
53
+ --oui-shadow: var(--oui-green-6);
43
54
  }
44
55
 
45
56
  :where(&-pill-orange, &-tag-orange) {
46
- --background: var(--oui-orange-1);
47
- --border: var(--oui-orange-3);
48
- --foreground: var(--oui-orange-8);
57
+ --oui-background: var(--oui-orange-0);
58
+ --oui-foreground: var(--oui-orange-8);
59
+ --oui-shadow: var(--oui-orange-6);
49
60
  }
50
61
 
51
62
  :where(&-pill-purple, &-tag-purple) {
52
- --background: var(--oui-purple-1);
53
- --border: var(--oui-purple-3);
54
- --foreground: var(--oui-purple-8);
63
+ --oui-background: var(--oui-purple-0);
64
+ --oui-foreground: var(--oui-purple-8);
65
+ --oui-shadow: var(--oui-purple-6);
55
66
  }
56
67
 
57
68
  :where(&-pill-red, &-tag-red) {
58
- --background: var(--oui-red-1);
59
- --border: var(--oui-red-3);
60
- --foreground: var(--oui-red-8);
69
+ --oui-background: var(--oui-red-0);
70
+ --oui-foreground: var(--oui-red-8);
71
+ --oui-shadow: var(--oui-red-6);
61
72
  }
62
73
 
63
74
  :where(&-pill-yellow, &-tag-yellow) {
64
- --background: var(--oui-yellow-1);
65
- --border: var(--oui-yellow-3);
66
- --foreground: var(--oui-yellow-8);
75
+ --oui-background: var(--oui-yellow-0);
76
+ --oui-foreground: var(--oui-yellow-8);
77
+ --oui-shadow: var(--oui-yellow-6);
67
78
  }
68
79
  }
package/src/css/button.scss ADDED
@@ -0,0 +1,121 @@
1
+ .oui-button {
2
+ :where(&) {
3
+ --oui-background-percentage: 25%;
4
+ --oui-foreground-percentage: 0%;
5
+ --oui-outline-percentage: 100%;
6
+ --oui-shadow-percentage: 90%;
7
+
8
+ --oui-shadow-value: color-mix(
9
+ in oklch,
10
+ var(--oui-shadow, var(--oui-gray-6)),
11
+ transparent var(--oui-shadow-percentage)
12
+ );
13
+
14
+ padding: 0.5em 0.75em;
15
+ display: inline-flex;
16
+ flex-flow: row wrap;
17
+ gap: 0.75em;
18
+ border-radius: 0.25em;
19
+ background-color: color-mix(
20
+ in oklab,
21
+ var(--oui-background, var(--oui-gray-2)),
22
+ transparent var(--oui-background-percentage)
23
+ );
24
+ outline: 4px solid
25
+ color-mix(
26
+ in oklab,
27
+ var(--oui-shadow, var(--oui-gray-6)),
28
+ transparent var(--oui-outline-percentage)
29
+ );
30
+ border: none;
31
+ box-shadow: 0 0 0 1px var(--oui-shadow-value),
32
+ 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
33
+ color: color-mix(
34
+ in oklab,
35
+ var(--oui-foreground, var(--oui-gray-8)),
36
+ transparent var(--oui-foreground-percentage)
37
+ );
38
+ line-height: 1.25;
39
+ transition: 0.125s ease-in-out;
40
+ }
41
+
42
+ :where(&-blue) {
43
+ --oui-background: var(--oui-blue-2);
44
+ --oui-foreground: var(--oui-blue-8);
45
+ --oui-shadow: var(--oui-blue-6);
46
+ }
47
+
48
+ :where(&-green) {
49
+ --oui-background: var(--oui-green-2);
50
+ --oui-foreground: var(--oui-green-8);
51
+ --oui-shadow: var(--oui-green-6);
52
+ }
53
+
54
+ :where(&-orange) {
55
+ --oui-background: var(--oui-orange-2);
56
+ --oui-foreground: var(--oui-orange-8);
57
+ --oui-shadow: var(--oui-orange-6);
58
+ }
59
+
60
+ :where(&-purple) {
61
+ --oui-background: var(--oui-purple-2);
62
+ --oui-foreground: var(--oui-purple-8);
63
+ --oui-shadow: var(--oui-purple-6);
64
+ }
65
+
66
+ :where(&-red) {
67
+ --oui-background: var(--oui-red-2);
68
+ --oui-foreground: var(--oui-red-8);
69
+ --oui-shadow: var(--oui-red-6);
70
+ }
71
+
72
+ :where(&-yellow) {
73
+ --oui-background: var(--oui-yellow-2);
74
+ --oui-foreground: var(--oui-yellow-8);
75
+ --oui-shadow: var(--oui-yellow-6);
76
+ }
77
+
78
+ :where(&-rounded) {
79
+ padding: 0.5em 1em;
80
+ flex-wrap: nowrap;
81
+ border-radius: 5em;
82
+ white-space: nowrap;
83
+ }
84
+
85
+ :where(&-small) {
86
+ font-size: 0.875em;
87
+ }
88
+
89
+ :where(&-tiny) {
90
+ font-size: 0.75em;
91
+ font-weight: bold;
92
+ letter-spacing: 0.1em;
93
+ text-transform: uppercase;
94
+ }
95
+
96
+ :where(&:focus-visible) {
97
+ --oui-outline-percentage: 75%;
98
+ }
99
+
100
+ @media (hover: hover) {
101
+ :where(&:not([disabled], [aria-disabled='true' i]):hover) {
102
+ --oui-background-percentage: 50%;
103
+ --oui-foreground-percentage: 25%;
104
+ --oui-shadow-percentage: 92.5%;
105
+ }
106
+ }
107
+
108
+ :where(&:not([disabled], [aria-disabled='true' i]):active) {
109
+ box-shadow: 0 0 0 1px var(--oui-shadow-value),
110
+ inset 0 1px 2px 0 var(--oui-shadow-value),
111
+ inset 0 2px 4px 0 var(--oui-shadow-value);
112
+ }
113
+
114
+ :where(&[disabled], &[aria-disabled='true' i]) {
115
+ --oui-background-percentage: 80%;
116
+ --oui-foreground-percentage: 20%;
117
+ --oui-shadow-percentage: 95%;
118
+
119
+ font-style: italic;
120
+ }
121
+ }
package/src/css/color.scss CHANGED
@@ -1,113 +1,115 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
1
3
  @use './mixins' as mixins;
2
4
 
3
5
  :root {
4
6
  --oui-absolute: light-dark(white, black);
5
7
 
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));
8
+ --oui-blue-0: light-dark(oklch(0.99 0.01 260), oklch(0.2 0.08 250));
9
+ --oui-blue-1: light-dark(oklch(0.98 0.02 259), oklch(0.25 0.09 251));
10
+ --oui-blue-2: light-dark(oklch(0.95 0.03 258), oklch(0.32 0.1 252));
11
+ --oui-blue-3: light-dark(oklch(0.90 0.04 257), oklch(0.40 0.09 253));
12
+ --oui-blue-4: light-dark(oklch(0.80 0.06 256), oklch(0.5 0.08 254));
13
+ --oui-blue-5: light-dark(oklch(0.70 0.08 255), oklch(0.6 0.07 255));
14
+ --oui-blue-6: light-dark(oklch(0.60 0.1 254), oklch(0.7 0.06 256));
15
+ --oui-blue-7: light-dark(oklch(0.50 0.12 253), oklch(0.8 0.05 257));
16
+ --oui-blue-8: light-dark(oklch(0.42 0.11 252), oklch(0.85 0.04 258));
17
+ --oui-blue-9: light-dark(oklch(0.35 0.1 251), oklch(0.9 0.03 259));
18
+ --oui-blue-10: light-dark(oklch(0.3 0.09 250), oklch(0.95 0.02 260));
17
19
 
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));
20
+ --oui-green-0: light-dark(oklch(0.99 0.01 150), oklch(0.2 0.08 140));
21
+ --oui-green-1: light-dark(oklch(0.98 0.02 149), oklch(0.25 0.09 141));
22
+ --oui-green-2: light-dark(oklch(0.95 0.03 148), oklch(0.32 0.1 142));
23
+ --oui-green-3: light-dark(oklch(0.90 0.04 147), oklch(0.4 0.09 143));
24
+ --oui-green-4: light-dark(oklch(0.80 0.06 146), oklch(0.5 0.08 144));
25
+ --oui-green-5: light-dark(oklch(0.70 0.08 145), oklch(0.6 0.07 145));
26
+ --oui-green-6: light-dark(oklch(0.60 0.1 144), oklch(0.7 0.06 146));
27
+ --oui-green-7: light-dark(oklch(0.50 0.12 143), oklch(0.8 0.05 147));
28
+ --oui-green-8: light-dark(oklch(0.42 0.11 142), oklch(0.85 0.04 148));
29
+ --oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
30
+ --oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
29
31
 
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));
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));
34
+ --oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
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));
42
+ --oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
41
43
 
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));
44
+ --oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
45
+ --oui-purple-1: light-dark(oklch(0.98 0.035 299), oklch(0.25 0.09 291));
46
+ --oui-purple-2: light-dark(oklch(0.95 0.05 298), oklch(0.32 0.1 292));
47
+ --oui-purple-3: light-dark(oklch(0.90 0.07 297), oklch(0.4 0.09 293));
48
+ --oui-purple-4: light-dark(oklch(0.80 0.1 296), oklch(0.5 0.08 294));
49
+ --oui-purple-5: light-dark(oklch(0.70 0.11 295), oklch(0.6 0.07 295));
50
+ --oui-purple-6: light-dark(oklch(0.60 0.12 294), oklch(0.7 0.06 296));
51
+ --oui-purple-7: light-dark(oklch(0.50 0.14 293), oklch(0.8 0.05 297));
52
+ --oui-purple-8: light-dark(oklch(0.42 0.12 292), oklch(0.85 0.04 298));
53
+ --oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
54
+ --oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
53
55
 
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));
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));
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));
66
+ --oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
65
67
 
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));
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));
70
+ --oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
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));
78
+ --oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
77
79
 
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));
80
+ --oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
81
+ --oui-gray-1: light-dark(oklch(0.98 0 0), oklch(0.26 0 0));
82
+ --oui-gray-2: light-dark(oklch(0.95 0 0), oklch(0.32 0 0));
83
+ --oui-gray-3: light-dark(oklch(0.90 0 0), oklch(0.4 0 0));
84
+ --oui-gray-4: light-dark(oklch(0.80 0 0), oklch(0.5 0 0));
85
+ --oui-gray-5: light-dark(oklch(0.70 0 0), oklch(0.6 0 0));
86
+ --oui-gray-6: light-dark(oklch(0.60 0 0), oklch(0.7 0 0));
87
+ --oui-gray-7: light-dark(oklch(0.50 0 0), oklch(0.8 0 0));
88
+ --oui-gray-8: light-dark(oklch(0.42 0 0), oklch(0.85 0 0));
89
+ --oui-gray-9: light-dark(oklch(0.35 0 0), oklch(0.9 0 0));
90
+ --oui-gray-10: light-dark(oklch(0.3 0 0), oklch(0.95 0 0));
89
91
 
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));
92
+ --oui-slate-0: light-dark(oklch(0.99 0.0025 255), oklch(0.22 0.005 255));
93
+ --oui-slate-1: light-dark(oklch(0.98 0.005 255), oklch(0.26 0.0075 255));
94
+ --oui-slate-2: light-dark(oklch(0.95 0.0075 255), oklch(0.32 0.01 255));
95
+ --oui-slate-3: light-dark(oklch(0.90 0.01 255), oklch(0.4 0.0125 255));
96
+ --oui-slate-4: light-dark(oklch(0.80 0.015 255), oklch(0.5 0.015 255));
97
+ --oui-slate-5: light-dark(oklch(0.70 0.02 255), oklch(0.6 0.02 255));
98
+ --oui-slate-6: light-dark(oklch(0.60 0.015 255), oklch(0.7 0.015 255));
99
+ --oui-slate-7: light-dark(oklch(0.50 0.0125 255), oklch(0.8 0.0125 255));
100
+ --oui-slate-8: light-dark(oklch(0.42 0.01 255), oklch(0.85 0.01 255));
101
+ --oui-slate-9: light-dark(oklch(0.35 0.0075 255), oklch(0.9 0.0075 255));
102
+ --oui-slate-10: light-dark(oklch(0.3 0.005 255), oklch(0.95 0.005 255));
101
103
 
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));
104
+ --oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.22 0.005 95));
105
+ --oui-stone-1: light-dark(oklch(0.98 0.0067 95), oklch(0.26 0.0075 95));
106
+ --oui-stone-2: light-dark(oklch(0.95 0.01 95), oklch(0.32 0.01 95));
107
+ --oui-stone-3: light-dark(oklch(0.90 0.0125 95), oklch(0.4 0.0125 95));
108
+ --oui-stone-4: light-dark(oklch(0.80 0.015 95), oklch(0.5 0.015 95));
109
+ --oui-stone-5: light-dark(oklch(0.70 0.02 95), oklch(0.6 0.02 95));
110
+ --oui-stone-6: light-dark(oklch(0.60 0.015 95), oklch(0.7 0.015 95));
111
+ --oui-stone-7: light-dark(oklch(0.50 0.0125 95), oklch(0.8 0.0125 95));
112
+ --oui-stone-8: light-dark(oklch(0.42 0.01 95), oklch(0.85 0.01 95));
113
+ --oui-stone-9: light-dark(oklch(0.35 0.0075 95), oklch(0.9 0.0075 95));
114
+ --oui-stone-10: light-dark(oklch(0.3 0.005 95), oklch(0.95 0.005 95));
113
115
  }