@oscarpalmer/oui 0.9.0 → 0.11.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 (21) hide show
  1. package/dist/css/a11y.css +3 -0
  2. package/dist/css/badge.css +31 -22
  3. package/dist/css/button.css +92 -0
  4. package/dist/css/color.css +103 -99
  5. package/dist/css/flex.css +2 -0
  6. package/dist/css/form.css +514 -89
  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 +4 -4
  11. package/dist/js/focus-trap.js +4 -4
  12. package/package.json +19 -11
  13. package/src/css/badge.scss +34 -22
  14. package/src/css/button.scss +90 -0
  15. package/src/css/color.scss +101 -99
  16. package/src/css/form.scss +368 -94
  17. package/src/css/message.scss +36 -23
  18. package/src/css/mixins.scss +43 -0
  19. package/src/css/reset.scss +12 -17
  20. package/src/css/table.scss +3 -1
  21. package/src/js/focus-trap.ts +4 -4
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
  }