@oscarpalmer/oui 0.6.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 (16) 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 +2 -7
  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/components/switch/switch.component.cjs +0 -6
  14. package/dist/components/switch/switch.component.js +0 -6
  15. package/dist/css/colours.css +0 -476
  16. package/src/css/colours.scss +0 -19
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
@@ -7,12 +7,7 @@
7
7
  "devDependencies": {
8
8
  "@biomejs/biome": "^1.9",
9
9
  "sass": "^1.83",
10
- "stylelint": "^16.12"
11
- },
12
- "exports": {
13
- "./css/a11y": "./dist/css/a11y.css",
14
- "./css/flex": "./dist/css/flex.css",
15
- "./css/reset": "./dist/css/reset.css"
10
+ "stylelint": "^16.14"
16
11
  },
17
12
  "files": ["dist", "src"],
18
13
  "keywords": [
@@ -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.6.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/components/switch/switch.component.cjs DELETED
@@ -1,6 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- class SwitchComponent extends HTMLElement {
4
- }
5
- customElements.define("oui-switch", SwitchComponent);
6
- exports.SwitchComponent = SwitchComponent;
package/dist/components/switch/switch.component.js DELETED
@@ -1,6 +0,0 @@
1
- class SwitchComponent extends HTMLElement {
2
- }
3
- customElements.define("oui-switch", SwitchComponent);
4
- export {
5
- SwitchComponent
6
- };
package/dist/css/colours.css DELETED
@@ -1,476 +0,0 @@
1
- :root {
2
- --oui-absolute: white;
3
- }
4
- :root {
5
- --oui-blue-0: #f4f8fd;
6
- --oui-blue-1: color-mix(
7
- in srgb,
8
- var(--oui-blue-0),
9
- var(--oui-blue-6) 5%
10
- );
11
- --oui-blue-2: color-mix(
12
- in srgb,
13
- var(--oui-blue-0),
14
- var(--oui-blue-6) 15%
15
- );
16
- --oui-blue-3: color-mix(
17
- in srgb,
18
- var(--oui-blue-0),
19
- var(--oui-blue-6) 30%
20
- );
21
- --oui-blue-4: color-mix(
22
- in srgb,
23
- var(--oui-blue-0),
24
- var(--oui-blue-6) 50%
25
- );
26
- --oui-blue-5: color-mix(
27
- in srgb,
28
- var(--oui-blue-0),
29
- var(--oui-blue-6) 75%
30
- );
31
- --oui-blue-6: #48d;
32
- --oui-blue-7: color-mix(
33
- in srgb,
34
- var(--oui-blue-10),
35
- var(--oui-blue-6) 75%
36
- );
37
- --oui-blue-8: color-mix(
38
- in srgb,
39
- var(--oui-blue-10),
40
- var(--oui-blue-6) 50%
41
- );
42
- --oui-blue-9: color-mix(
43
- in srgb,
44
- var(--oui-blue-10),
45
- var(--oui-blue-6) 25%
46
- );
47
- --oui-blue-10: #123;
48
- }
49
- @media (prefers-color-scheme: dark) {
50
- :root {
51
- --oui-blue-0: #012;
52
- --oui-blue-6: #15a;
53
- --oui-blue-10: #d1d5da;
54
- }
55
- }
56
- :root {
57
- --oui-green-0: #f4fbf5;
58
- --oui-green-1: color-mix(
59
- in srgb,
60
- var(--oui-green-0),
61
- var(--oui-green-6) 5%
62
- );
63
- --oui-green-2: color-mix(
64
- in srgb,
65
- var(--oui-green-0),
66
- var(--oui-green-6) 15%
67
- );
68
- --oui-green-3: color-mix(
69
- in srgb,
70
- var(--oui-green-0),
71
- var(--oui-green-6) 30%
72
- );
73
- --oui-green-4: color-mix(
74
- in srgb,
75
- var(--oui-green-0),
76
- var(--oui-green-6) 50%
77
- );
78
- --oui-green-5: color-mix(
79
- in srgb,
80
- var(--oui-green-0),
81
- var(--oui-green-6) 75%
82
- );
83
- --oui-green-6: #4b5;
84
- --oui-green-7: color-mix(
85
- in srgb,
86
- var(--oui-green-10),
87
- var(--oui-green-6) 75%
88
- );
89
- --oui-green-8: color-mix(
90
- in srgb,
91
- var(--oui-green-10),
92
- var(--oui-green-6) 50%
93
- );
94
- --oui-green-9: color-mix(
95
- in srgb,
96
- var(--oui-green-10),
97
- var(--oui-green-6) 25%
98
- );
99
- --oui-green-10: #231;
100
- }
101
- @media (prefers-color-scheme: dark) {
102
- :root {
103
- --oui-green-0: #0a1a0a;
104
- --oui-green-6: #182;
105
- --oui-green-10: #d1d8d2;
106
- }
107
- }
108
- :root {
109
- --oui-grey-0: #f8f8f8;
110
- --oui-grey-1: color-mix(
111
- in srgb,
112
- var(--oui-grey-0),
113
- var(--oui-grey-6) 5%
114
- );
115
- --oui-grey-2: color-mix(
116
- in srgb,
117
- var(--oui-grey-0),
118
- var(--oui-grey-6) 15%
119
- );
120
- --oui-grey-3: color-mix(
121
- in srgb,
122
- var(--oui-grey-0),
123
- var(--oui-grey-6) 30%
124
- );
125
- --oui-grey-4: color-mix(
126
- in srgb,
127
- var(--oui-grey-0),
128
- var(--oui-grey-6) 50%
129
- );
130
- --oui-grey-5: color-mix(
131
- in srgb,
132
- var(--oui-grey-0),
133
- var(--oui-grey-6) 75%
134
- );
135
- --oui-grey-6: #888;
136
- --oui-grey-7: color-mix(
137
- in srgb,
138
- var(--oui-grey-10),
139
- var(--oui-grey-6) 75%
140
- );
141
- --oui-grey-8: color-mix(
142
- in srgb,
143
- var(--oui-grey-10),
144
- var(--oui-grey-6) 50%
145
- );
146
- --oui-grey-9: color-mix(
147
- in srgb,
148
- var(--oui-grey-10),
149
- var(--oui-grey-6) 25%
150
- );
151
- --oui-grey-10: #222;
152
- }
153
- @media (prefers-color-scheme: dark) {
154
- :root {
155
- --oui-grey-0: #111;
156
- --oui-grey-6: #555;
157
- --oui-grey-10: #d8d8d8;
158
- }
159
- }
160
- :root {
161
- --oui-orange-0: #fef7f2;
162
- --oui-orange-1: color-mix(
163
- in srgb,
164
- var(--oui-orange-0),
165
- var(--oui-orange-6) 5%
166
- );
167
- --oui-orange-2: color-mix(
168
- in srgb,
169
- var(--oui-orange-0),
170
- var(--oui-orange-6) 15%
171
- );
172
- --oui-orange-3: color-mix(
173
- in srgb,
174
- var(--oui-orange-0),
175
- var(--oui-orange-6) 30%
176
- );
177
- --oui-orange-4: color-mix(
178
- in srgb,
179
- var(--oui-orange-0),
180
- var(--oui-orange-6) 50%
181
- );
182
- --oui-orange-5: color-mix(
183
- in srgb,
184
- var(--oui-orange-0),
185
- var(--oui-orange-6) 75%
186
- );
187
- --oui-orange-6: #e72;
188
- --oui-orange-7: color-mix(
189
- in srgb,
190
- var(--oui-orange-10),
191
- var(--oui-orange-6) 75%
192
- );
193
- --oui-orange-8: color-mix(
194
- in srgb,
195
- var(--oui-orange-10),
196
- var(--oui-orange-6) 50%
197
- );
198
- --oui-orange-9: color-mix(
199
- in srgb,
200
- var(--oui-orange-10),
201
- var(--oui-orange-6) 25%
202
- );
203
- --oui-orange-10: #420;
204
- }
205
- @media (prefers-color-scheme: dark) {
206
- :root {
207
- --oui-orange-0: #2a1500;
208
- --oui-orange-6: #b40;
209
- --oui-orange-10: #dbd4d0;
210
- }
211
- }
212
- :root {
213
- --oui-purple-0: #fcf7fb;
214
- --oui-purple-1: color-mix(
215
- in srgb,
216
- var(--oui-purple-0),
217
- var(--oui-purple-6) 5%
218
- );
219
- --oui-purple-2: color-mix(
220
- in srgb,
221
- var(--oui-purple-0),
222
- var(--oui-purple-6) 15%
223
- );
224
- --oui-purple-3: color-mix(
225
- in srgb,
226
- var(--oui-purple-0),
227
- var(--oui-purple-6) 30%
228
- );
229
- --oui-purple-4: color-mix(
230
- in srgb,
231
- var(--oui-purple-0),
232
- var(--oui-purple-6) 50%
233
- );
234
- --oui-purple-5: color-mix(
235
- in srgb,
236
- var(--oui-purple-0),
237
- var(--oui-purple-6) 75%
238
- );
239
- --oui-purple-6: #c7b;
240
- --oui-purple-7: color-mix(
241
- in srgb,
242
- var(--oui-purple-10),
243
- var(--oui-purple-6) 75%
244
- );
245
- --oui-purple-8: color-mix(
246
- in srgb,
247
- var(--oui-purple-10),
248
- var(--oui-purple-6) 50%
249
- );
250
- --oui-purple-9: color-mix(
251
- in srgb,
252
- var(--oui-purple-10),
253
- var(--oui-purple-6) 25%
254
- );
255
- --oui-purple-10: #313;
256
- }
257
- @media (prefers-color-scheme: dark) {
258
- :root {
259
- --oui-purple-0: #1a0a1a;
260
- --oui-purple-6: #94a;
261
- --oui-purple-10: #d9d4da;
262
- }
263
- }
264
- :root {
265
- --oui-slate-0: #f6f7f8;
266
- --oui-slate-1: color-mix(
267
- in srgb,
268
- var(--oui-slate-0),
269
- var(--oui-slate-6) 5%
270
- );
271
- --oui-slate-2: color-mix(
272
- in srgb,
273
- var(--oui-slate-0),
274
- var(--oui-slate-6) 15%
275
- );
276
- --oui-slate-3: color-mix(
277
- in srgb,
278
- var(--oui-slate-0),
279
- var(--oui-slate-6) 30%
280
- );
281
- --oui-slate-4: color-mix(
282
- in srgb,
283
- var(--oui-slate-0),
284
- var(--oui-slate-6) 50%
285
- );
286
- --oui-slate-5: color-mix(
287
- in srgb,
288
- var(--oui-slate-0),
289
- var(--oui-slate-6) 75%
290
- );
291
- --oui-slate-6: #708090;
292
- --oui-slate-7: color-mix(
293
- in srgb,
294
- var(--oui-slate-10),
295
- var(--oui-slate-6) 75%
296
- );
297
- --oui-slate-8: color-mix(
298
- in srgb,
299
- var(--oui-slate-10),
300
- var(--oui-slate-6) 50%
301
- );
302
- --oui-slate-9: color-mix(
303
- in srgb,
304
- var(--oui-slate-10),
305
- var(--oui-slate-6) 25%
306
- );
307
- --oui-slate-10: #242f2f;
308
- }
309
- @media (prefers-color-scheme: dark) {
310
- :root {
311
- --oui-slate-0: #011;
312
- --oui-slate-6: #405060;
313
- --oui-slate-10: #d6d7d8;
314
- }
315
- }
316
- :root {
317
- --oui-stone-0: #f8f8f6;
318
- --oui-stone-1: color-mix(
319
- in srgb,
320
- var(--oui-stone-0),
321
- var(--oui-stone-6) 5%
322
- );
323
- --oui-stone-2: color-mix(
324
- in srgb,
325
- var(--oui-stone-0),
326
- var(--oui-stone-6) 15%
327
- );
328
- --oui-stone-3: color-mix(
329
- in srgb,
330
- var(--oui-stone-0),
331
- var(--oui-stone-6) 30%
332
- );
333
- --oui-stone-4: color-mix(
334
- in srgb,
335
- var(--oui-stone-0),
336
- var(--oui-stone-6) 50%
337
- );
338
- --oui-stone-5: color-mix(
339
- in srgb,
340
- var(--oui-stone-0),
341
- var(--oui-stone-6) 75%
342
- );
343
- --oui-stone-6: #928e85;
344
- --oui-stone-7: color-mix(
345
- in srgb,
346
- var(--oui-stone-10),
347
- var(--oui-stone-6) 75%
348
- );
349
- --oui-stone-8: color-mix(
350
- in srgb,
351
- var(--oui-stone-10),
352
- var(--oui-stone-6) 50%
353
- );
354
- --oui-stone-9: color-mix(
355
- in srgb,
356
- var(--oui-stone-10),
357
- var(--oui-stone-6) 25%
358
- );
359
- --oui-stone-10: #2f2f24;
360
- }
361
- @media (prefers-color-scheme: dark) {
362
- :root {
363
- --oui-stone-0: #110;
364
- --oui-stone-6: #625e55;
365
- --oui-stone-10: #d8d8d6;
366
- }
367
- }
368
- :root {
369
- --oui-red-0: #fdf4f4;
370
- --oui-red-1: color-mix(
371
- in srgb,
372
- var(--oui-red-0),
373
- var(--oui-red-6) 5%
374
- );
375
- --oui-red-2: color-mix(
376
- in srgb,
377
- var(--oui-red-0),
378
- var(--oui-red-6) 15%
379
- );
380
- --oui-red-3: color-mix(
381
- in srgb,
382
- var(--oui-red-0),
383
- var(--oui-red-6) 30%
384
- );
385
- --oui-red-4: color-mix(
386
- in srgb,
387
- var(--oui-red-0),
388
- var(--oui-red-6) 50%
389
- );
390
- --oui-red-5: color-mix(
391
- in srgb,
392
- var(--oui-red-0),
393
- var(--oui-red-6) 75%
394
- );
395
- --oui-red-6: #d44;
396
- --oui-red-7: color-mix(
397
- in srgb,
398
- var(--oui-red-10),
399
- var(--oui-red-6) 75%
400
- );
401
- --oui-red-8: color-mix(
402
- in srgb,
403
- var(--oui-red-10),
404
- var(--oui-red-6) 50%
405
- );
406
- --oui-red-9: color-mix(
407
- in srgb,
408
- var(--oui-red-10),
409
- var(--oui-red-6) 25%
410
- );
411
- --oui-red-10: #422;
412
- }
413
- @media (prefers-color-scheme: dark) {
414
- :root {
415
- --oui-red-0: #200;
416
- --oui-red-6: #a11;
417
- --oui-red-10: #dad1d1;
418
- }
419
- }
420
- :root {
421
- --oui-yellow-0: #fefbf0;
422
- --oui-yellow-1: color-mix(
423
- in srgb,
424
- var(--oui-yellow-0),
425
- var(--oui-yellow-6) 5%
426
- );
427
- --oui-yellow-2: color-mix(
428
- in srgb,
429
- var(--oui-yellow-0),
430
- var(--oui-yellow-6) 15%
431
- );
432
- --oui-yellow-3: color-mix(
433
- in srgb,
434
- var(--oui-yellow-0),
435
- var(--oui-yellow-6) 30%
436
- );
437
- --oui-yellow-4: color-mix(
438
- in srgb,
439
- var(--oui-yellow-0),
440
- var(--oui-yellow-6) 50%
441
- );
442
- --oui-yellow-5: color-mix(
443
- in srgb,
444
- var(--oui-yellow-0),
445
- var(--oui-yellow-6) 75%
446
- );
447
- --oui-yellow-6: #eb0;
448
- --oui-yellow-7: color-mix(
449
- in srgb,
450
- var(--oui-yellow-10),
451
- var(--oui-yellow-6) 75%
452
- );
453
- --oui-yellow-8: color-mix(
454
- in srgb,
455
- var(--oui-yellow-10),
456
- var(--oui-yellow-6) 50%
457
- );
458
- --oui-yellow-9: color-mix(
459
- in srgb,
460
- var(--oui-yellow-10),
461
- var(--oui-yellow-6) 25%
462
- );
463
- --oui-yellow-10: #320;
464
- }
465
- @media (prefers-color-scheme: dark) {
466
- :root {
467
- --oui-yellow-0: #281f00;
468
- --oui-yellow-6: #b80;
469
- --oui-yellow-10: #dbd8d0;
470
- }
471
- }
472
- @media (prefers-color-scheme: dark) {
473
- :root {
474
- --oui-absolute: black;
475
- }
476
- }
package/src/css/colours.scss DELETED
@@ -1,19 +0,0 @@
1
- @use './mixins' as mixins;
2
-
3
- :root {
4
- --oui-absolute: white;
5
-
6
- @include mixins.colour('blue', '#f4f8fd', '#48d', '#123', '#012', '#15a', '#d1d5da');
7
- @include mixins.colour('green', '#f4fbf5', '#4b5', '#231', '#0a1a0a', '#182', '#d1d8d2');
8
- @include mixins.colour('grey', '#f8f8f8', '#888', '#222', '#111', '#555', '#d8d8d8');
9
- @include mixins.colour('orange', '#fef7f2', '#e72', '#420', '#2a1500', '#b40', '#dbd4d0');
10
- @include mixins.colour('purple', '#fcf7fb', '#c7b', '#313', '#1a0a1a', '#94a', '#d9d4da');
11
- @include mixins.colour('slate', '#f6f7f8', '#708090', '#242f2f', '#011', '#405060', '#d6d7d8');
12
- @include mixins.colour('stone', '#f8f8f6', '#928e85', '#2f2f24', '#110', '#625e55', '#d8d8d6');
13
- @include mixins.colour('red', '#fdf4f4', '#d44', '#422', '#200', '#a11', '#dad1d1');
14
- @include mixins.colour('yellow', '#fefbf0', '#eb0', '#320', '#281f00', '#b80', '#dbd8d0');
15
-
16
- @media (prefers-color-scheme: dark) {
17
- --oui-absolute: black;
18
- }
19
- }