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