@oscarpalmer/oui 0.10.0 → 0.12.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 (18) hide show
  1. package/dist/css/badge.css +6 -4
  2. package/dist/css/button.css +31 -26
  3. package/dist/css/color.css +25 -25
  4. package/dist/css/content.css +193 -0
  5. package/dist/css/form.css +404 -219
  6. package/dist/css/message.css +23 -16
  7. package/dist/css/reset.css +3 -1
  8. package/dist/css/table.css +26 -9
  9. package/package.json +4 -4
  10. package/src/css/badge.scss +8 -7
  11. package/src/css/button.scss +28 -57
  12. package/src/css/color.scss +25 -25
  13. package/src/css/content.scss +156 -0
  14. package/src/css/form.scss +300 -131
  15. package/src/css/message.scss +29 -21
  16. package/src/css/mixins.scss +62 -0
  17. package/src/css/reset.scss +3 -2
  18. package/src/css/table.scss +32 -7
package/dist/css/badge.css CHANGED
@@ -1,15 +1,16 @@
1
1
  /*! https://github.com/oscarpalmer/oui */
2
+
2
3
  :where(.oui-pill, .oui-tag) {
3
- --oui-shadow-value: color-mix(
4
- in oklch,
4
+ --oui-shadow-mixed: color-mix(
5
+ in oklab,
5
6
  var(--oui-shadow, var(--oui-gray-6)),
6
- transparent 95%
7
+ transparent 92.5%
7
8
  );
9
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
8
10
  display: inline-flex;
9
11
  flex-flow: row nowrap;
10
12
  gap: 0.5em;
11
13
  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
14
  color: var(--oui-foreground, var(--oui-gray-8));
14
15
  line-height: 1.25;
15
16
  }
@@ -25,6 +26,7 @@
25
26
  font-size: 0.875em;
26
27
  }
27
28
  :where(.oui-pill-tiny, .oui-tag-tiny) {
29
+ color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
28
30
  font-size: 0.75em;
29
31
  font-weight: bold;
30
32
  letter-spacing: 0.1em;
package/dist/css/button.css CHANGED
@@ -1,55 +1,59 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
1
3
  :where(.oui-button) {
2
4
  --oui-background-percentage: 25%;
3
5
  --oui-foreground-percentage: 0%;
4
6
  --oui-outline-percentage: 100%;
5
- --oui-shadow-percentage: 90%;
7
+ --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
8
+ --oui-shadow-percentage: 82.5%;
6
9
  --oui-shadow-value: color-mix(
7
- in oklch,
8
- var(--oui-shadow, var(--oui-gray-6)),
10
+ in oklab,
11
+ var(--oui-outline-value, var(--oui-gray-6)),
9
12
  transparent var(--oui-shadow-percentage)
10
13
  );
14
+ box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
11
15
  padding: 0.5em 0.75em;
12
16
  display: inline-flex;
13
17
  flex-flow: row wrap;
14
18
  gap: 0.75em;
19
+ align-items: center;
15
20
  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));
21
+ background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
22
+ outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
18
23
  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));
24
+ color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
21
25
  line-height: 1.25;
22
26
  transition: 0.125s ease-in-out;
23
27
  }
24
28
  :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);
29
+ --oui-background-value: var(--oui-blue-2);
30
+ --oui-foreground-value: var(--oui-blue-8);
31
+ --oui-outline-value: var(--oui-blue-6);
28
32
  }
29
33
  :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);
34
+ --oui-background-value: var(--oui-green-2);
35
+ --oui-foreground-value: var(--oui-green-8);
36
+ --oui-outline-value: var(--oui-green-6);
33
37
  }
34
38
  :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);
39
+ --oui-background-value: var(--oui-orange-2);
40
+ --oui-foreground-value: var(--oui-orange-8);
41
+ --oui-outline-value: var(--oui-orange-6);
38
42
  }
39
43
  :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);
44
+ --oui-background-value: var(--oui-purple-2);
45
+ --oui-foreground-value: var(--oui-purple-8);
46
+ --oui-outline-value: var(--oui-purple-6);
43
47
  }
44
48
  :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);
49
+ --oui-background-value: var(--oui-red-2);
50
+ --oui-foreground-value: var(--oui-red-8);
51
+ --oui-outline-value: var(--oui-red-6);
48
52
  }
49
53
  :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);
54
+ --oui-background-value: var(--oui-yellow-2);
55
+ --oui-foreground-value: var(--oui-yellow-8);
56
+ --oui-outline-value: var(--oui-yellow-6);
53
57
  }
54
58
  :where(.oui-button-rounded) {
55
59
  padding: 0.5em 1em;
@@ -61,6 +65,7 @@
61
65
  font-size: 0.875em;
62
66
  }
63
67
  :where(.oui-button-tiny) {
68
+ --oui-foreground-percentage: 12.5%;
64
69
  font-size: 0.75em;
65
70
  font-weight: bold;
66
71
  letter-spacing: 0.1em;
@@ -73,7 +78,7 @@
73
78
  :where(.oui-button:not([disabled], [aria-disabled=true i]):hover) {
74
79
  --oui-background-percentage: 50%;
75
80
  --oui-foreground-percentage: 25%;
76
- --oui-shadow-percentage: 92.5%;
81
+ --oui-shadow-percentage: 90%;
77
82
  }
78
83
  }
79
84
  :where(.oui-button:not([disabled], [aria-disabled=true i]):active) {
package/dist/css/color.css CHANGED
@@ -24,16 +24,16 @@
24
24
  --oui-green-8: light-dark(oklch(0.42 0.11 142), oklch(0.85 0.04 148));
25
25
  --oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
26
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));
27
+ --oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
28
+ --oui-orange-1: light-dark(oklch(0.985 0.035 59), oklch(0.25 0.09 51));
29
29
  --oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
30
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));
31
+ --oui-orange-4: light-dark(oklch(0.87 0.1 56), oklch(0.5 0.08 54));
32
+ --oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
33
+ --oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
34
+ --oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
35
+ --oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
36
+ --oui-orange-9: light-dark(oklch(0.375 0.11 51), oklch(0.9 0.03 59));
37
37
  --oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
38
38
  --oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
39
39
  --oui-purple-1: light-dark(oklch(0.98 0.035 299), oklch(0.25 0.09 291));
@@ -46,27 +46,27 @@
46
46
  --oui-purple-8: light-dark(oklch(0.42 0.12 292), oklch(0.85 0.04 298));
47
47
  --oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
48
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));
49
+ --oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
50
+ --oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
51
+ --oui-red-2: light-dark(oklch(0.97 0.05 23), oklch(0.32 0.1 23));
52
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));
53
+ --oui-red-4: light-dark(oklch(0.87 0.1 21), oklch(0.5 0.08 21));
54
+ --oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
55
+ --oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
56
+ --oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
57
+ --oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
58
+ --oui-red-9: light-dark(oklch(0.375 0.11 16), oklch(0.9 0.03 16));
59
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));
60
+ --oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
61
+ --oui-yellow-1: light-dark(oklch(0.985 0.035 99), oklch(0.25 0.09 91));
62
62
  --oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
63
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));
64
+ --oui-yellow-4: light-dark(oklch(0.87 0.1 96), oklch(0.5 0.08 94));
65
+ --oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
66
+ --oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
67
+ --oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
68
+ --oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
69
+ --oui-yellow-9: light-dark(oklch(0.375 0.11 91), oklch(0.9 0.03 99));
70
70
  --oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
71
71
  --oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
72
72
  --oui-gray-1: light-dark(oklch(0.98 0 0), oklch(0.26 0 0));
package/dist/css/content.css ADDED
@@ -0,0 +1,193 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
3
+ :where(.oui-card) {
4
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
5
+ padding: 1em 1.25em;
6
+ background-color: var(--oui-absolute);
7
+ border-radius: 0.5em;
8
+ }
9
+
10
+ :where(.oui-details > summary) {
11
+ display: inline-flex;
12
+ align-items: center;
13
+ list-style: none;
14
+ outline: 4px solid color-mix(in oklab, var(--oui-blue-6), transparent var(--oui-outline-percentage, 100%));
15
+ outline-offset: 0.25em;
16
+ border-radius: 0.125em;
17
+ transition: 0.125s ease-in-out, margin 0s;
18
+ cursor: pointer;
19
+ }
20
+ :where(.oui-details > summary)::before {
21
+ content: "";
22
+ width: 1em;
23
+ height: 1em;
24
+ margin: 0 0.5em 0 0;
25
+ background-color: currentColor;
26
+ -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
27
+ mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
28
+ -webkit-mask-size: contain;
29
+ mask-size: contain;
30
+ -webkit-mask-position: center;
31
+ mask-position: center;
32
+ -webkit-mask-repeat: no-repeat;
33
+ mask-repeat: no-repeat;
34
+ transition: 0.125s ease-in-out;
35
+ transform: rotate(-90deg);
36
+ }
37
+ :where(.oui-details > summary):focus-visible {
38
+ --oui-outline-percentage: 50%;
39
+ padding: 0 0.5em 0 0.25em;
40
+ color: var(--oui-blue-8);
41
+ }
42
+ @media (hover: hover) {
43
+ :where(.oui-details > summary):hover {
44
+ color: var(--oui-blue-8);
45
+ }
46
+ }
47
+ :where(.oui-details[open] > summary) {
48
+ margin: 0 0 1em;
49
+ }
50
+ :where(.oui-details[open] > summary)::before {
51
+ transform: rotate(0deg);
52
+ }
53
+
54
+ :where(.oui-formatted) {
55
+ box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
56
+ padding: 1em 1.25em;
57
+ background-color: var(--oui-absolute);
58
+ border-radius: 0.5em;
59
+ color: var(--oui-gray-8);
60
+ font-family: monospace, monospace;
61
+ font-size: 0.875rem;
62
+ line-height: 1.5;
63
+ }
64
+
65
+ :where(.oui-meter) {
66
+ -webkit-appearance: none;
67
+ -moz-appearance: none;
68
+ appearance: none;
69
+ height: 0.75em;
70
+ padding: 0.125em;
71
+ overflow: hidden;
72
+ background-color: var(--oui-absolute);
73
+ background-image: none;
74
+ border: 1px solid var(--oui-gray-3);
75
+ border-radius: 0.375em;
76
+ box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
77
+ }
78
+ :where(.oui-meter)::-moz-meter-bar {
79
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
80
+ -webkit-appearance: none;
81
+ -moz-appearance: none;
82
+ appearance: none;
83
+ min-width: 0.5em;
84
+ background-color: var(--oui-blue-5);
85
+ background-image: none;
86
+ border-radius: 0.25em;
87
+ }
88
+ :where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
89
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
90
+ -webkit-appearance: none;
91
+ -moz-appearance: none;
92
+ appearance: none;
93
+ min-width: 0.5em;
94
+ background-color: var(--oui-green-5);
95
+ background-image: none;
96
+ border-radius: 0.25em;
97
+ }
98
+ :where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
99
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
100
+ -webkit-appearance: none;
101
+ -moz-appearance: none;
102
+ appearance: none;
103
+ min-width: 0.5em;
104
+ background-color: var(--oui-yellow-5);
105
+ background-image: none;
106
+ border-radius: 0.25em;
107
+ }
108
+ :where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
109
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
110
+ -webkit-appearance: none;
111
+ -moz-appearance: none;
112
+ appearance: none;
113
+ min-width: 0.5em;
114
+ background-color: var(--oui-red-5);
115
+ background-image: none;
116
+ border-radius: 0.25em;
117
+ }
118
+ :where(.oui-meter)::-webkit-meter-bar {
119
+ -webkit-appearance: none;
120
+ appearance: none;
121
+ background: none;
122
+ }
123
+ :where(.oui-meter)::-webkit-meter-even-less-good-value {
124
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
125
+ -webkit-appearance: none;
126
+ -moz-appearance: none;
127
+ appearance: none;
128
+ min-width: 0.5em;
129
+ background-color: var(--oui-red-5);
130
+ background-image: none;
131
+ border-radius: 0.25em;
132
+ }
133
+ :where(.oui-meter)::-webkit-meter-optimum-value {
134
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
135
+ -webkit-appearance: none;
136
+ -moz-appearance: none;
137
+ appearance: none;
138
+ min-width: 0.5em;
139
+ background-color: var(--oui-green-5);
140
+ background-image: none;
141
+ border-radius: 0.25em;
142
+ }
143
+ :where(.oui-meter)::-webkit-meter-suboptimum-value {
144
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
145
+ -webkit-appearance: none;
146
+ -moz-appearance: none;
147
+ appearance: none;
148
+ min-width: 0.5em;
149
+ background-color: var(--oui-yellow-5);
150
+ background-image: none;
151
+ border-radius: 0.25em;
152
+ }
153
+
154
+ :where(.oui-progress) {
155
+ -webkit-appearance: none;
156
+ -moz-appearance: none;
157
+ appearance: none;
158
+ height: 0.75em;
159
+ padding: 0.125em;
160
+ overflow: hidden;
161
+ background-color: var(--oui-absolute);
162
+ background-image: none;
163
+ border: 1px solid var(--oui-gray-3);
164
+ border-radius: 0.375em;
165
+ box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
166
+ }
167
+ :where(.oui-progress)::-moz-progress-bar {
168
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
169
+ -webkit-appearance: none;
170
+ -moz-appearance: none;
171
+ appearance: none;
172
+ min-width: 0.5em;
173
+ background-color: var(--oui-blue-5);
174
+ background-image: none;
175
+ border-radius: 0.25em;
176
+ }
177
+ :where(.oui-progress)::-webkit-progress-bar {
178
+ -webkit-appearance: none;
179
+ appearance: none;
180
+ background: none;
181
+ }
182
+ :where(.oui-progress)::-webkit-progress-value {
183
+ box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
184
+ -webkit-appearance: none;
185
+ -moz-appearance: none;
186
+ appearance: none;
187
+ min-width: 0.5em;
188
+ background-color: var(--oui-blue-5);
189
+ background-image: none;
190
+ border-radius: 0.25em;
191
+ }
192
+
193
+