@oscarpalmer/oui 0.5.0 → 0.6.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 (9) hide show
  1. package/dist/components/switch/switch.component.cjs +6 -0
  2. package/dist/components/switch/switch.component.js +6 -0
  3. package/dist/css/colours.css +8 -0
  4. package/dist/css/form.css +91 -28
  5. package/dist/css/table.css +8 -8
  6. package/package.json +1 -1
  7. package/src/css/colours.scss +6 -0
  8. package/src/css/form.scss +95 -31
  9. package/src/css/table.scss +8 -8
package/dist/components/switch/switch.component.cjs ADDED
@@ -0,0 +1,6 @@
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 ADDED
@@ -0,0 +1,6 @@
1
+ class SwitchComponent extends HTMLElement {
2
+ }
3
+ customElements.define("oui-switch", SwitchComponent);
4
+ export {
5
+ SwitchComponent
6
+ };
package/dist/css/colours.css CHANGED
@@ -1,3 +1,6 @@
1
+ :root {
2
+ --oui-absolute: white;
3
+ }
1
4
  :root {
2
5
  --oui-blue-0: #f4f8fd;
3
6
  --oui-blue-1: color-mix(
@@ -466,3 +469,8 @@
466
469
  --oui-yellow-10: #dbd8d0;
467
470
  }
468
471
  }
472
+ @media (prefers-color-scheme: dark) {
473
+ :root {
474
+ --oui-absolute: black;
475
+ }
476
+ }
package/dist/css/form.css CHANGED
@@ -9,9 +9,10 @@
9
9
  padding: 0.5em 0.75em;
10
10
  outline: 3px solid transparent;
11
11
  outline-offset: 0;
12
- border-color: var(--oui-grey-4);
12
+ background-color: var(--oui-absolute);
13
+ border-color: var(--oui-grey-3);
13
14
  border-radius: 0.25em;
14
- box-shadow: inset 0 1px 2px 0 color-mix(in srgb, var(--oui-grey-10), transparent 75%);
15
+ box-shadow: inset 0 1px 2px 0 color-mix(in srgb, var(--oui-grey-10), transparent 80%);
15
16
  transition: 0.125s ease-in-out;
16
17
  }
17
18
  :where(.oui-input:not(textarea)) {
@@ -31,20 +32,21 @@
31
32
  }
32
33
  :where(.oui-input.oui-validateable:not([disabled], [aria-disabled=true]):is(:user-invalid,
33
34
  [aria-invalid=true])) {
34
- outline-color: color-mix(in srgb, var(--oui-red-4), transparent 75%);
35
+ outline-color: color-mix(in srgb, var(--oui-red-6), transparent 60%);
35
36
  border-color: var(--oui-red-6);
36
37
  }
37
38
  :where(.oui-input.oui-validateable:not([disabled], [aria-disabled=true]):is(:user-valid,
38
39
  [aria-invalid=false])) {
39
- outline-color: color-mix(in srgb, var(--oui-green-4), transparent 75%);
40
+ outline-color: color-mix(in srgb, var(--oui-green-6), transparent 60%);
40
41
  border-color: var(--oui-green-6);
41
42
  }
42
43
  :where(.oui-input:not([disabled], [aria-disabled=true]):focus) {
43
- outline-color: var(--oui-blue-4);
44
+ outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
44
45
  border-color: var(--oui-blue-6);
45
46
  }
46
47
  @media (hover: hover) {
47
48
  :where(.oui-input:not([disabled], [aria-disabled=true]):hover) {
49
+ outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
48
50
  border-color: var(--oui-blue-6);
49
51
  }
50
52
  }
@@ -82,14 +84,58 @@
82
84
  border-radius: 0.25em;
83
85
  }
84
86
 
85
- :where(.oui-toggle) {
86
- padding: 0 0 0 2em;
87
+ :where(.oui-switch, .oui-toggle) {
87
88
  position: relative;
88
89
  cursor: pointer;
89
90
  }
90
- :where(.oui-toggle)::before, :where(.oui-toggle)::after {
91
+ :where(.oui-switch, .oui-toggle)::before, :where(.oui-switch, .oui-toggle)::after {
92
+ font-family: system-ui, sans-serif;
91
93
  position: absolute;
92
94
  transition: 0.125s ease-in-out;
95
+ pointer-events: none;
96
+ }
97
+ :where(.oui-switch, .oui-toggle)::before {
98
+ outline: 3px solid transparent;
99
+ outline-offset: 0;
100
+ }
101
+
102
+ :where(.oui-switch) {
103
+ padding: 0 3em 0 0;
104
+ }
105
+ :where(.oui-switch)::before {
106
+ content: "";
107
+ width: 2.5em;
108
+ height: 1.5em;
109
+ display: inline-block;
110
+ background-color: var(--oui-grey-0);
111
+ border: 1px solid var(--oui-grey-3);
112
+ border-radius: 3em;
113
+ right: 0;
114
+ }
115
+ :where(.oui-switch)::after {
116
+ content: "✕";
117
+ width: 1.5em;
118
+ height: 1.5em;
119
+ background-color: var(--oui-absolute);
120
+ border-radius: 1.5em;
121
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
122
+ color: var(--oui-grey-8);
123
+ font-size: 0.75em;
124
+ font-weight: bold;
125
+ line-height: 1.5em;
126
+ text-align: center;
127
+ top: 0.25em;
128
+ right: 1.5em;
129
+ }
130
+ :where(.oui-switch:has(input:checked))::after {
131
+ content: "✓";
132
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
133
+ color: var(--oui-blue-8);
134
+ right: 0.25em;
135
+ }
136
+
137
+ :where(.oui-toggle) {
138
+ padding: 0 0 0 2em;
93
139
  }
94
140
  :where(.oui-toggle)::before {
95
141
  content: "";
@@ -97,11 +143,8 @@
97
143
  height: 1.5em;
98
144
  display: inline-block;
99
145
  background-color: transparent;
100
- outline: 3px solid transparent;
101
- outline-offset: 0;
102
146
  border: 1px solid var(--oui-grey-4);
103
147
  inset: 0 auto auto 0;
104
- pointer-events: none;
105
148
  }
106
149
  :where(.oui-toggle)::after {
107
150
  opacity: 0;
@@ -127,49 +170,69 @@
127
170
  content: "";
128
171
  width: 0.75em;
129
172
  height: 0.75em;
130
- background-color: white;
173
+ background-color: var(--oui-absolute);
131
174
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
132
175
  inset: 0.375em auto auto 0.375em;
133
176
  }
134
- :where(.oui-toggle:has(input:checked))::before {
177
+ :where(.oui-toggle:has(input:checked))::after {
178
+ opacity: 1;
179
+ }
180
+
181
+ :where(.oui-switch:has(input:checked),
182
+ .oui-toggle:has(input:checked))::before {
135
183
  background-color: var(--oui-blue-6);
136
184
  border-color: transparent;
137
185
  }
138
- :where(.oui-toggle:has(input:checked))::after {
139
- opacity: 1;
186
+ :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):focus-within,
187
+ .oui-toggle:has(input:not([disabled], [aria-disabled=true])):focus-within) {
188
+ color: var(--oui-blue-8);
140
189
  }
141
- :where(.oui-toggle:has(input:not([disabled], [aria-disabled=true])):focus-within)::before {
142
- outline-color: var(--oui-blue-4);
143
- border-color: white;
190
+ :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):focus-within,
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%);
193
+ border-color: var(--oui-absolute);
144
194
  }
145
195
  @media (hover: hover) {
146
- :where(.oui-toggle:has(input:not([disabled], [aria-disabled=true])):hover)::before {
196
+ :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):hover,
197
+ .oui-toggle:has(input:not([disabled], [aria-disabled=true])):hover) {
198
+ color: var(--oui-blue-8);
199
+ }
200
+ :where(.oui-switch:has(input:not([disabled], [aria-disabled=true])):hover,
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%);
147
203
  border-color: var(--oui-blue-6);
148
204
  }
149
- :where(.oui-toggle:has(input:not([disabled], [aria-disabled=true]):is(:checked)):hover)::before {
150
- background-color: color-mix(in srgb, var(--oui-blue-6), transparent 50%);
205
+ :where(.oui-switch:has(input:not([disabled], [aria-disabled=true]):is(:checked)):hover,
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%);
151
208
  }
152
209
  }
153
- :where(.oui-toggle:has(input[disabled], input[aria-disabled=true])) {
210
+ :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
211
+ .oui-toggle:has(input[disabled], input[aria-disabled=true])) {
154
212
  cursor: default;
155
213
  }
156
- :where(.oui-toggle:has(input[disabled], input[aria-disabled=true])), :where(.oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
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]),
216
+ .oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
157
217
  color: color-mix(in srgb, currentColor, transparent 25%);
158
218
  }
159
- :where(.oui-toggle:has(input[disabled], input[aria-disabled=true]))::before {
219
+ :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
220
+ .oui-toggle:has(input[disabled], input[aria-disabled=true]))::before {
160
221
  background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
161
- border-color: var(--oui-grey-4);
222
+ border-color: var(--oui-grey-3);
162
223
  }
163
- :where(.oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
224
+ :where(.oui-switch:has(input[disabled], input[aria-disabled=true]),
225
+ .oui-toggle:has(input[disabled], input[aria-disabled=true]))::after {
226
+ box-shadow: 0 0 0 1px var(--oui-grey-3);
164
227
  text-shadow: none;
165
228
  }
166
229
 
167
- :where(label.oui-toggle) {
230
+ :where(label.oui-switch, label.oui-toggle) {
168
231
  display: inline-block;
169
232
  line-height: 1.5;
170
233
  }
171
234
 
172
- :where(.oui-toggle input) {
235
+ :where(.oui-switch input, .oui-toggle input) {
173
236
  width: 1px !important;
174
237
  height: 1px !important;
175
238
  padding: 0 !important;
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(--border, var(--oui-grey-3, #ccc));
7
+ border: 1px solid var(--oui-grey-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(--header, var(--oui-grey-1, #eee));
16
- border: solid var(--border, var(--oui-grey-3, #ccc));
15
+ background-color: var(--oui-grey-1);
16
+ border: solid var(--oui-grey-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(--alternate, var(--oui-blue-0, #fafcff));
26
+ background-color: var(--oui-blue-0);
27
27
  }
28
28
  :where(.oui-table th, .oui-table tfoot td) {
29
- background-color: var(--header, var(--oui-grey-1, #eee));
30
- border: solid var(--border, var(--oui-grey-3, #ccc));
29
+ background-color: var(--oui-grey-1);
30
+ border: solid var(--oui-grey-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(--border, var(--oui-grey-3, #ccc));
38
+ border-bottom: 1px solid var(--oui-grey-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(--border, var(--oui-grey-3, #ccc));
57
+ border: solid var(--oui-grey-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
@@ -36,5 +36,5 @@
36
36
  "watch": "npx sass ./src/css:./dist/css --no-source-map --watch"
37
37
  },
38
38
  "type": "module",
39
- "version": "0.5.0"
39
+ "version": "0.6.0"
40
40
  }
package/src/css/colours.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  @use './mixins' as mixins;
2
2
 
3
3
  :root {
4
+ --oui-absolute: white;
5
+
4
6
  @include mixins.colour('blue', '#f4f8fd', '#48d', '#123', '#012', '#15a', '#d1d5da');
5
7
  @include mixins.colour('green', '#f4fbf5', '#4b5', '#231', '#0a1a0a', '#182', '#d1d8d2');
6
8
  @include mixins.colour('grey', '#f8f8f8', '#888', '#222', '#111', '#555', '#d8d8d8');
@@ -10,4 +12,8 @@
10
12
  @include mixins.colour('stone', '#f8f8f6', '#928e85', '#2f2f24', '#110', '#625e55', '#d8d8d6');
11
13
  @include mixins.colour('red', '#fdf4f4', '#d44', '#422', '#200', '#a11', '#dad1d1');
12
14
  @include mixins.colour('yellow', '#fefbf0', '#eb0', '#320', '#281f00', '#b80', '#dbd8d0');
15
+
16
+ @media (prefers-color-scheme: dark) {
17
+ --oui-absolute: black;
18
+ }
13
19
  }
package/src/css/form.scss CHANGED
@@ -11,10 +11,11 @@
11
11
  padding: 0.5em 0.75em;
12
12
  outline: 3px solid transparent;
13
13
  outline-offset: 0;
14
- border-color: var(--oui-grey-4);
14
+ background-color: var(--oui-absolute);
15
+ border-color: var(--oui-grey-3);
15
16
  border-radius: 0.25em;
16
17
  box-shadow: inset 0 1px 2px 0
17
- color-mix(in srgb, var(--oui-grey-10), transparent 75%);
18
+ color-mix(in srgb, var(--oui-grey-10), transparent 80%);
18
19
  transition: 0.125s ease-in-out;
19
20
  }
20
21
 
@@ -45,7 +46,7 @@
45
46
  [aria-invalid='true']
46
47
  )
47
48
  ) {
48
- outline-color: color-mix(in srgb, var(--oui-red-4), transparent 75%);
49
+ outline-color: color-mix(in srgb, var(--oui-red-6), transparent 60%);
49
50
  border-color: var(--oui-red-6);
50
51
  }
51
52
 
@@ -55,17 +56,18 @@
55
56
  [aria-invalid='false']
56
57
  )
57
58
  ) {
58
- outline-color: color-mix(in srgb, var(--oui-green-4), transparent 75%);
59
+ outline-color: color-mix(in srgb, var(--oui-green-6), transparent 60%);
59
60
  border-color: var(--oui-green-6);
60
61
  }
61
62
 
62
63
  :where(&:not([disabled], [aria-disabled='true']):focus) {
63
- outline-color: var(--oui-blue-4);
64
+ outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
64
65
  border-color: var(--oui-blue-6);
65
66
  }
66
67
 
67
68
  @media (hover: hover) {
68
69
  :where(&:not([disabled], [aria-disabled='true']):hover) {
70
+ outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
69
71
  border-color: var(--oui-blue-6);
70
72
  }
71
73
  }
@@ -106,17 +108,69 @@
106
108
  border-radius: 0.25em;
107
109
  }
108
110
 
109
- .oui-toggle {
111
+ :where(.oui-switch, .oui-toggle) {
112
+ position: relative;
113
+ cursor: pointer;
114
+
115
+ &::before,
116
+ &::after {
117
+ font-family: system-ui, sans-serif;
118
+ position: absolute;
119
+ transition: 0.125s ease-in-out;
120
+ pointer-events: none;
121
+ }
122
+
123
+ &::before {
124
+ outline: 3px solid transparent;
125
+ outline-offset: 0;
126
+ }
127
+ }
128
+
129
+ .oui-switch {
110
130
  :where(&) {
111
- padding: 0 0 0 2em;
112
- position: relative;
113
- cursor: pointer;
131
+ padding: 0 3em 0 0;
114
132
 
115
- &::before,
133
+ &::before {
134
+ content: '';
135
+ width: 2.5em;
136
+ height: 1.5em;
137
+ display: inline-block;
138
+ background-color: var(--oui-grey-0);
139
+ border: 1px solid var(--oui-grey-3);
140
+ border-radius: 3em;
141
+ right: 0;
142
+ }
143
+
144
+ &::after {
145
+ content: '\2715';
146
+ width: 1.5em;
147
+ height: 1.5em;
148
+ background-color: var(--oui-absolute);
149
+ border-radius: 1.5em;
150
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
151
+ color: var(--oui-grey-8);
152
+ font-size: 0.75em;
153
+ font-weight: bold;
154
+ line-height: 1.5em;
155
+ text-align: center;
156
+ top: 0.25em;
157
+ right: 1.5em;
158
+ }
159
+ }
160
+
161
+ :where(&:has(input:checked)) {
116
162
  &::after {
117
- position: absolute;
118
- transition: 0.125s ease-in-out;
163
+ content: '\2713';
164
+ box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
165
+ color: var(--oui-blue-8);
166
+ right: 0.25em;
119
167
  }
168
+ }
169
+ }
170
+
171
+ .oui-toggle {
172
+ :where(&) {
173
+ padding: 0 0 0 2em;
120
174
 
121
175
  &::before {
122
176
  content: '';
@@ -124,11 +178,8 @@
124
178
  height: 1.5em;
125
179
  display: inline-block;
126
180
  background-color: transparent;
127
- outline: 3px solid transparent;
128
- outline-offset: 0;
129
181
  border: 1px solid var(--oui-grey-4);
130
182
  inset: 0 auto auto 0;
131
- pointer-events: none;
132
183
  }
133
184
 
134
185
  &::after {
@@ -164,39 +215,51 @@
164
215
  content: '';
165
216
  width: 0.75em;
166
217
  height: 0.75em;
167
- background-color: white;
218
+ background-color: var(--oui-absolute);
168
219
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
169
220
  inset: 0.375em auto auto 0.375em;
170
221
  }
171
222
  }
172
223
 
224
+ :where(&:has(input:checked)) {
225
+ &::after {
226
+ opacity: 1;
227
+ }
228
+ }
229
+ }
230
+
231
+ .oui-switch,
232
+ .oui-toggle {
173
233
  :where(&:has(input:checked)) {
174
234
  &::before {
175
235
  background-color: var(--oui-blue-6);
176
236
  border-color: transparent;
177
237
  }
178
-
179
- &::after {
180
- opacity: 1;
181
- }
182
238
  }
183
239
 
184
- :where(
185
- &:has(input:not([disabled], [aria-disabled='true'])):focus-within
186
- )::before {
187
- outline-color: var(--oui-blue-4);
188
- border-color: white;
240
+ :where(&:has(input:not([disabled], [aria-disabled='true'])):focus-within) {
241
+ color: var(--oui-blue-8);
242
+
243
+ &::before {
244
+ outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 60%);
245
+ border-color: var(--oui-absolute);
246
+ }
189
247
  }
190
248
 
191
249
  @media (hover: hover) {
192
- :where(&:has(input:not([disabled], [aria-disabled='true'])):hover)::before {
193
- border-color: var(--oui-blue-6);
250
+ :where(&:has(input:not([disabled], [aria-disabled='true'])):hover) {
251
+ color: var(--oui-blue-8);
252
+
253
+ &::before {
254
+ outline-color: color-mix(in srgb, var(--oui-blue-6), transparent 80%);
255
+ border-color: var(--oui-blue-6);
256
+ }
194
257
  }
195
258
 
196
259
  :where(
197
260
  &:has(input:not([disabled], [aria-disabled='true']):is(:checked)):hover
198
261
  )::before {
199
- background-color: color-mix(in srgb, var(--oui-blue-6), transparent 50%);
262
+ background-color: color-mix(in srgb, var(--oui-blue-6), transparent 40%);
200
263
  }
201
264
  }
202
265
 
@@ -210,20 +273,21 @@
210
273
 
211
274
  &::before {
212
275
  background-color: color-mix(in srgb, var(--oui-grey-0), transparent 50%);
213
- border-color: var(--oui-grey-4);
276
+ border-color: var(--oui-grey-3);
214
277
  }
215
278
 
216
279
  &::after {
280
+ box-shadow: 0 0 0 1px var(--oui-grey-3);
217
281
  text-shadow: none;
218
282
  }
219
283
  }
220
284
  }
221
285
 
222
- :where(label.oui-toggle) {
286
+ :where(label.oui-switch, label.oui-toggle) {
223
287
  display: inline-block;
224
288
  line-height: 1.5;
225
289
  }
226
290
 
227
- :where(.oui-toggle input) {
291
+ :where(.oui-switch input, .oui-toggle input) {
228
292
  @include mixins.visuallyHidden;
229
293
  }
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(--border, var(--oui-grey-3, #ccc));
9
+ border: 1px solid var(--oui-grey-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(--header, var(--oui-grey-1, #eee));
19
- border: solid var(--border, var(--oui-grey-3, #ccc));
18
+ background-color: var(--oui-grey-1);
19
+ border: solid var(--oui-grey-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(--alternate, var(--oui-blue-0, #fafcff));
30
+ background-color: var(--oui-blue-0);
31
31
  }
32
32
 
33
33
  :where(& th, & tfoot td) {
34
- background-color: var(--header, var(--oui-grey-1, #eee));
35
- border: solid var(--border, var(--oui-grey-3, #ccc));
34
+ background-color: var(--oui-grey-1);
35
+ border: solid var(--oui-grey-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(--border, var(--oui-grey-3, #ccc));
43
+ border-bottom: 1px solid var(--oui-grey-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(--border, var(--oui-grey-3, #ccc));
69
+ border: solid var(--oui-grey-3);
70
70
  border-width: 0 1px 1px 0;
71
71
  }
72
72