@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/message.css CHANGED
@@ -1,17 +1,18 @@
1
1
  /*! https://github.com/oscarpalmer/oui */
2
+
2
3
  :where(.oui-message) {
3
- --oui-shadow-value: color-mix(
4
- in oklch,
5
- var(--oui-shadow, var(--oui-gray-6)),
6
- transparent 95%
4
+ --oui-shadow-mixed: color-mix(
5
+ in oklab,
6
+ var(--oui-shadow-value, var(--oui-gray-6)),
7
+ transparent 92.5%
7
8
  );
8
- padding: 1em;
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);
10
+ padding: 1em 1.25em;
11
+ background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
12
+ border-radius: 0.5em;
9
13
  display: inline-flex;
10
14
  flex-flow: column nowrap;
11
15
  gap: 1em;
12
- background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
13
- border-radius: 0.5em;
14
- 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);
15
16
  color: var(--oui-foreground, var(--oui-gray-8));
16
17
  line-height: 1.25;
17
18
  }
@@ -21,8 +22,8 @@
21
22
  }
22
23
  :where(.oui-message hr) {
23
24
  height: 1px;
24
- margin: 0 -1em;
25
- background-color: var(--oui-shadow-value, var(--oui-gray-2));
25
+ margin: 0 -1.25em;
26
+ background-color: var(--oui-border, var(--oui-gray-2));
26
27
  border: none;
27
28
  }
28
29
  :where(.oui-message p) {
@@ -32,33 +33,39 @@
32
33
  }
33
34
  :where(.oui-message-blue, .oui-message-info) {
34
35
  --oui-background: var(--oui-blue-0);
36
+ --oui-border: var(--oui-blue-2);
35
37
  --oui-foreground: var(--oui-blue-8);
36
- --oui-shadow: var(--oui-blue-6);
38
+ --oui-shadow-value: var(--oui-blue-6);
37
39
  }
38
40
  :where(.oui-message-green, .oui-message-success) {
39
41
  --oui-background: var(--oui-green-0);
42
+ --oui-border: var(--oui-green-2);
40
43
  --oui-foreground: var(--oui-green-8);
41
- --oui-shadow: var(--oui-green-6);
44
+ --oui-shadow-value: var(--oui-green-6);
42
45
  }
43
46
  :where(.oui-message-orange, .oui-message-warning) {
44
47
  --oui-background: var(--oui-orange-0);
48
+ --oui-border: var(--oui-orange-2);
45
49
  --oui-foreground: var(--oui-orange-8);
46
- --oui-shadow: var(--oui-orange-6);
50
+ --oui-shadow-value: var(--oui-orange-6);
47
51
  }
48
52
  :where(.oui-message-purple, .oui-message-special) {
49
53
  --oui-background: var(--oui-purple-0);
54
+ --oui-border: var(--oui-purple-2);
50
55
  --oui-foreground: var(--oui-purple-8);
51
- --oui-shadow: var(--oui-purple-6);
56
+ --oui-shadow-value: var(--oui-purple-6);
52
57
  }
53
58
  :where(.oui-message-red, .oui-message-error) {
54
59
  --oui-background: var(--oui-red-0);
60
+ --oui-border: var(--oui-red-2);
55
61
  --oui-foreground: var(--oui-red-8);
56
- --oui-shadow: var(--oui-red-6);
62
+ --oui-shadow-value: var(--oui-red-6);
57
63
  }
58
64
  :where(.oui-message-yellow, .oui-message-notice) {
59
65
  --oui-background: var(--oui-yellow-0);
66
+ --oui-border: var(--oui-yellow-2);
60
67
  --oui-foreground: var(--oui-yellow-8);
61
- --oui-shadow: var(--oui-yellow-6);
68
+ --oui-shadow-value: var(--oui-yellow-6);
62
69
  }
63
70
 
64
71
 
package/dist/css/reset.css CHANGED
@@ -184,7 +184,9 @@
184
184
  -moz-appearance: none;
185
185
  appearance: none; /* Change the inconsistent appearance in all browsers [SE]*/
186
186
  padding-right: 1em; /* ditto*/
187
- background: 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") no-repeat right center/1em; /* ditto*/
187
+ background-image: 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");
188
+ background-position: right center/1em; /* ditto*/
189
+ background-repeat: no-repeat; /* ditto*/
188
190
  border-radius: 0; /* ditto*/
189
191
  }
190
192
 
package/dist/css/table.css CHANGED
@@ -1,6 +1,7 @@
1
1
  /*! https://github.com/oscarpalmer/oui */
2
2
  :where(.oui-table) {
3
3
  width: 100%;
4
+ background-color: var(--oui-absolute);
4
5
  }
5
6
  :where(.oui-table-wrapper) {
6
7
  max-height: 32em;
@@ -24,35 +25,51 @@
24
25
  z-index: 2;
25
26
  }
26
27
  :where(.oui-table tbody tr:nth-of-type(2n)) {
27
- background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
28
+ background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
28
29
  }
29
30
  :where(.oui-table th, .oui-table tfoot td) {
30
31
  background-color: var(--oui-gray-1);
31
32
  border: solid var(--oui-gray-3);
32
33
  border-width: 0 1px 0 0;
34
+ }
35
+ :where(.oui-table thead th, .oui-table tfoot td) {
33
36
  position: sticky;
34
37
  left: 0;
35
38
  z-index: 1;
36
39
  }
37
- :where(.oui-table th, .oui-table tfoot td)::after {
40
+ :where(.oui-table thead th, .oui-table tfoot td)::after {
38
41
  content: "";
39
- border-bottom: 1px solid var(--oui-gray-3);
42
+ width: 100%;
43
+ height: 4px;
44
+ background-image: linear-gradient(to var(--oui-shadow-direction), rgba(0, 0, 0, 0.1), transparent);
40
45
  position: absolute;
41
46
  }
42
47
  :where(.oui-table th, .oui-table td) {
43
- padding: 0.5em;
48
+ padding: 0.5em 0.625rem;
44
49
  }
45
- :where(.oui-table th) {
46
- top: 2em;
50
+ :where(.oui-table thead th) {
51
+ font-size: 0.75rem;
52
+ font-weight: bold;
53
+ letter-spacing: 0.1em;
54
+ text-align: left;
55
+ text-transform: uppercase;
56
+ top: 0;
57
+ }
58
+ :where(.oui-table thead th)::after {
59
+ --oui-shadow-direction: bottom;
60
+ border-top: 1px solid var(--oui-gray-3);
61
+ inset: 100% 0 0 0;
47
62
  }
48
- :where(.oui-table th)::after {
49
- inset: auto 0 0 0;
63
+ :where(.oui-table:has(caption) thead th) {
64
+ top: 2rem;
50
65
  }
51
66
  :where(.oui-table tfoot td) {
52
67
  bottom: 0;
53
68
  }
54
69
  :where(.oui-table tfoot td)::after {
55
- inset: 0 0 auto 0;
70
+ --oui-shadow-direction: top;
71
+ border-bottom: 1px solid var(--oui-gray-3);
72
+ inset: -4px 0 0 0;
56
73
  }
57
74
  :where(.oui-table tbody td) {
58
75
  border: solid var(--oui-gray-3);
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  },
10
10
  "description": "Styles, components, and utilities for building websites and applications.",
11
11
  "devDependencies": {
12
- "@biomejs/biome": "^1.9",
12
+ "@biomejs/biome": "^2",
13
13
  "@rollup/plugin-node-resolve": "^16",
14
14
  "@rollup/plugin-typescript": "^12.1",
15
15
  "@types/node": "^24",
@@ -22,7 +22,7 @@
22
22
  "postcss-input-range": "^6",
23
23
  "postcss-scss": "^4",
24
24
  "sass": "^1.89",
25
- "stylelint": "^16.20",
25
+ "stylelint": "^16.21",
26
26
  "tslib": "^2.8",
27
27
  "typescript": "^5.8",
28
28
  "vite": "^6.3",
@@ -78,11 +78,11 @@
78
78
  "rollup": "npx rollup -c --watch",
79
79
  "test": "npx vitest --coverage",
80
80
  "types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
81
- "watch:css": "npx sass ./src/css:./dist/css --no-source-map --watch",
81
+ "watch:css": "npx sass ./postcss:./dist/css --no-source-map --watch",
82
82
  "watch:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
83
83
  "watch:js": "npx vite build --watch"
84
84
  },
85
85
  "type": "module",
86
86
  "types": "types/index.d.cts",
87
- "version": "0.10.0"
87
+ "version": "0.12.0"
88
88
  }
package/src/css/badge.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  /*! https://github.com/oscarpalmer/oui */
2
2
 
3
+ @use './mixins.scss' as mixins;
4
+
3
5
  .oui {
4
6
  :where(&-pill, &-tag) {
5
- --oui-shadow-value: color-mix(
6
- in oklch,
7
+ --oui-shadow-mixed: color-mix(
8
+ in oklab,
7
9
  var(--oui-shadow, var(--oui-gray-6)),
8
- transparent 95%
10
+ transparent 92.5%
9
11
  );
10
12
 
13
+ @include mixins.shadow(var(--oui-shadow-mixed));
14
+
11
15
  display: inline-flex;
12
16
  flex-flow: row nowrap;
13
17
  gap: .5em;
14
18
  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
15
- box-shadow:
16
- 0 0 0 1px var(--oui-shadow-value),
17
- 0 1px 2px 0 var(--oui-shadow-value),
18
- 0 2px 4px 0 var(--oui-shadow-value);
19
19
  color: var(--oui-foreground, var(--oui-gray-8));
20
20
  line-height: 1.25;
21
21
  }
@@ -35,6 +35,7 @@
35
35
  }
36
36
 
37
37
  :where(&-pill-tiny, &-tag-tiny) {
38
+ color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
38
39
  font-size: .75em;
39
40
  font-weight: bold;
40
41
  letter-spacing: .1em;
package/src/css/button.scss CHANGED
@@ -1,78 +1,46 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
3
+ @use './mixins' as mixins;
4
+
1
5
  .oui-button {
2
6
  :where(&) {
3
- --oui-background-percentage: 25%;
4
- --oui-foreground-percentage: 0%;
5
- --oui-outline-percentage: 100%;
6
- --oui-shadow-percentage: 90%;
7
-
8
- --oui-shadow-value: color-mix(
9
- in oklch,
10
- var(--oui-shadow, var(--oui-gray-6)),
11
- transparent var(--oui-shadow-percentage)
12
- );
13
-
14
- padding: 0.5em 0.75em;
15
- display: inline-flex;
16
- flex-flow: row wrap;
17
- gap: 0.75em;
18
- border-radius: 0.25em;
19
- background-color: color-mix(
20
- in oklab,
21
- var(--oui-background, var(--oui-gray-2)),
22
- transparent var(--oui-background-percentage)
23
- );
24
- outline: 4px solid
25
- color-mix(
26
- in oklab,
27
- var(--oui-shadow, var(--oui-gray-6)),
28
- transparent var(--oui-outline-percentage)
29
- );
30
- border: none;
31
- box-shadow: 0 0 0 1px var(--oui-shadow-value),
32
- 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
33
- color: color-mix(
34
- in oklab,
35
- var(--oui-foreground, var(--oui-gray-8)),
36
- transparent var(--oui-foreground-percentage)
37
- );
38
- line-height: 1.25;
39
- transition: 0.125s ease-in-out;
7
+ @include mixins.button;
40
8
  }
41
9
 
42
10
  :where(&-blue) {
43
- --oui-background: var(--oui-blue-2);
44
- --oui-foreground: var(--oui-blue-8);
45
- --oui-shadow: var(--oui-blue-6);
11
+ --oui-background-value: var(--oui-blue-2);
12
+ --oui-foreground-value: var(--oui-blue-8);
13
+ --oui-outline-value: var(--oui-blue-6);
46
14
  }
47
15
 
48
16
  :where(&-green) {
49
- --oui-background: var(--oui-green-2);
50
- --oui-foreground: var(--oui-green-8);
51
- --oui-shadow: var(--oui-green-6);
17
+ --oui-background-value: var(--oui-green-2);
18
+ --oui-foreground-value: var(--oui-green-8);
19
+ --oui-outline-value: var(--oui-green-6);
52
20
  }
53
21
 
54
22
  :where(&-orange) {
55
- --oui-background: var(--oui-orange-2);
56
- --oui-foreground: var(--oui-orange-8);
57
- --oui-shadow: var(--oui-orange-6);
23
+ --oui-background-value: var(--oui-orange-2);
24
+ --oui-foreground-value: var(--oui-orange-8);
25
+ --oui-outline-value: var(--oui-orange-6);
58
26
  }
59
27
 
60
28
  :where(&-purple) {
61
- --oui-background: var(--oui-purple-2);
62
- --oui-foreground: var(--oui-purple-8);
63
- --oui-shadow: var(--oui-purple-6);
29
+ --oui-background-value: var(--oui-purple-2);
30
+ --oui-foreground-value: var(--oui-purple-8);
31
+ --oui-outline-value: var(--oui-purple-6);
64
32
  }
65
33
 
66
34
  :where(&-red) {
67
- --oui-background: var(--oui-red-2);
68
- --oui-foreground: var(--oui-red-8);
69
- --oui-shadow: var(--oui-red-6);
35
+ --oui-background-value: var(--oui-red-2);
36
+ --oui-foreground-value: var(--oui-red-8);
37
+ --oui-outline-value: var(--oui-red-6);
70
38
  }
71
39
 
72
40
  :where(&-yellow) {
73
- --oui-background: var(--oui-yellow-2);
74
- --oui-foreground: var(--oui-yellow-8);
75
- --oui-shadow: var(--oui-yellow-6);
41
+ --oui-background-value: var(--oui-yellow-2);
42
+ --oui-foreground-value: var(--oui-yellow-8);
43
+ --oui-outline-value: var(--oui-yellow-6);
76
44
  }
77
45
 
78
46
  :where(&-rounded) {
@@ -87,6 +55,8 @@
87
55
  }
88
56
 
89
57
  :where(&-tiny) {
58
+ --oui-foreground-percentage: 12.5%;
59
+
90
60
  font-size: 0.75em;
91
61
  font-weight: bold;
92
62
  letter-spacing: 0.1em;
@@ -101,12 +71,13 @@
101
71
  :where(&:not([disabled], [aria-disabled='true' i]):hover) {
102
72
  --oui-background-percentage: 50%;
103
73
  --oui-foreground-percentage: 25%;
104
- --oui-shadow-percentage: 92.5%;
74
+ --oui-shadow-percentage: 90%;
105
75
  }
106
76
  }
107
77
 
108
78
  :where(&:not([disabled], [aria-disabled='true' i]):active) {
109
- box-shadow: 0 0 0 1px var(--oui-shadow-value),
79
+ box-shadow:
80
+ 0 0 0 1px var(--oui-shadow-value),
110
81
  inset 0 1px 2px 0 var(--oui-shadow-value),
111
82
  inset 0 2px 4px 0 var(--oui-shadow-value);
112
83
  }
package/src/css/color.scss CHANGED
@@ -29,16 +29,16 @@
29
29
  --oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
30
30
  --oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
31
31
 
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));
32
+ --oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
33
+ --oui-orange-1: light-dark(oklch(0.985 0.035 59), oklch(0.25 0.09 51));
34
34
  --oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
35
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));
36
+ --oui-orange-4: light-dark(oklch(0.87 0.1 56), oklch(0.5 0.08 54));
37
+ --oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
38
+ --oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
39
+ --oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
40
+ --oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
41
+ --oui-orange-9: light-dark(oklch(0.375 0.11 51), oklch(0.9 0.03 59));
42
42
  --oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
43
43
 
44
44
  --oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
@@ -53,28 +53,28 @@
53
53
  --oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
54
54
  --oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
55
55
 
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));
56
+ --oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
57
+ --oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
58
+ --oui-red-2: light-dark(oklch(0.97 0.05 23), oklch(0.32 0.1 23));
59
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));
60
+ --oui-red-4: light-dark(oklch(0.87 0.1 21), oklch(0.5 0.08 21));
61
+ --oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
62
+ --oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
63
+ --oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
64
+ --oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
65
+ --oui-red-9: light-dark(oklch(0.375 0.11 16), oklch(0.9 0.03 16));
66
66
  --oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
67
67
 
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));
68
+ --oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
69
+ --oui-yellow-1: light-dark(oklch(0.985 0.035 99), oklch(0.25 0.09 91));
70
70
  --oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
71
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));
72
+ --oui-yellow-4: light-dark(oklch(0.87 0.1 96), oklch(0.5 0.08 94));
73
+ --oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
74
+ --oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
75
+ --oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
76
+ --oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
77
+ --oui-yellow-9: light-dark(oklch(0.375 0.11 91), oklch(0.9 0.03 99));
78
78
  --oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
79
79
 
80
80
  --oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
package/src/css/content.scss ADDED
@@ -0,0 +1,156 @@
1
+ /*! https://github.com/oscarpalmer/oui */
2
+
3
+ @use './mixins' as mixins;
4
+
5
+ @mixin thumb($background, $shadow) {
6
+ @include mixins.shadow(
7
+ color-mix(in oklab, $shadow, transparent 33%),
8
+ color-mix(in oklab, white, transparent 82.5%)
9
+ );
10
+
11
+ appearance: none;
12
+ min-width: 0.5em;
13
+ background-color: $background;
14
+ background-image: none;
15
+ border-radius: 0.25em;
16
+ }
17
+
18
+ @mixin track {
19
+ appearance: none;
20
+ height: 0.75em;
21
+ padding: 0.125em;
22
+ overflow: hidden;
23
+ background-color: var(--oui-absolute);
24
+ background-image: none;
25
+ border: 1px solid var(--oui-gray-3);
26
+ border-radius: 0.375em;
27
+ box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
28
+ }
29
+
30
+ .oui-card {
31
+ :where(&) {
32
+ @include mixins.card;
33
+ }
34
+ }
35
+
36
+ .oui-details {
37
+ :where(& > summary) {
38
+ display: inline-flex;
39
+ align-items: center;
40
+ list-style: none;
41
+ outline: 4px solid
42
+ color-mix(
43
+ in oklab,
44
+ var(--oui-blue-6),
45
+ transparent var(--oui-outline-percentage, 100%)
46
+ );
47
+ outline-offset: 0.25em;
48
+ border-radius: 0.125em;
49
+ transition: 0.125s ease-in-out, margin 0s;
50
+ cursor: pointer;
51
+
52
+ &::before {
53
+ content: '';
54
+ width: 1em;
55
+ height: 1em;
56
+ margin: 0 0.5em 0 0;
57
+ background-color: currentColor;
58
+ 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");
59
+ mask-size: contain;
60
+ mask-position: center;
61
+ mask-repeat: no-repeat;
62
+ transition: 0.125s ease-in-out;
63
+ transform: rotate(-90deg);
64
+ }
65
+
66
+ &:focus-visible {
67
+ --oui-outline-percentage: 50%;
68
+
69
+ padding: 0 0.5em 0 0.25em;
70
+ color: var(--oui-blue-8);
71
+ }
72
+
73
+ @media (hover: hover) {
74
+ &:hover {
75
+ color: var(--oui-blue-8);
76
+ }
77
+ }
78
+ }
79
+
80
+ :where(&[open] > summary) {
81
+ margin: 0 0 1em;
82
+
83
+ &::before {
84
+ transform: rotate(0deg);
85
+ }
86
+ }
87
+ }
88
+
89
+ .oui-formatted {
90
+ :where(&) {
91
+ @include mixins.card;
92
+
93
+ color: var(--oui-gray-8);
94
+ font-family: monospace, monospace;
95
+ font-size: 0.875rem;
96
+ line-height: 1.5;
97
+ }
98
+ }
99
+
100
+ .oui-meter {
101
+ :where(&) {
102
+ @include track;
103
+
104
+ &::-moz-meter-bar {
105
+ @include thumb(var(--oui-blue-5), var(--oui-blue-6));
106
+ }
107
+
108
+ &:-moz-meter-optimum::-moz-meter-bar {
109
+ @include thumb(var(--oui-green-5), var(--oui-green-6));
110
+ }
111
+
112
+ &:-moz-meter-sub-optimum::-moz-meter-bar {
113
+ @include thumb(var(--oui-yellow-5), var(--oui-yellow-6));
114
+ }
115
+
116
+ &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
117
+ @include thumb(var(--oui-red-5), var(--oui-red-6));
118
+ }
119
+
120
+ &::-webkit-meter-bar {
121
+ appearance: none;
122
+ background: none;
123
+ }
124
+
125
+ &::-webkit-meter-even-less-good-value {
126
+ @include thumb(var(--oui-red-5), var(--oui-red-6));
127
+ }
128
+
129
+ &::-webkit-meter-optimum-value {
130
+ @include thumb(var(--oui-green-5), var(--oui-green-6));
131
+ }
132
+
133
+ &::-webkit-meter-suboptimum-value {
134
+ @include thumb(var(--oui-yellow-5), var(--oui-yellow-6));
135
+ }
136
+ }
137
+ }
138
+
139
+ .oui-progress {
140
+ :where(&) {
141
+ @include track;
142
+
143
+ &::-moz-progress-bar {
144
+ @include thumb(var(--oui-blue-5), var(--oui-blue-6));
145
+ }
146
+
147
+ &::-webkit-progress-bar {
148
+ appearance: none;
149
+ background: none;
150
+ }
151
+
152
+ &::-webkit-progress-value {
153
+ @include thumb(var(--oui-blue-5), var(--oui-blue-6));
154
+ }
155
+ }
156
+ }