opui-css 5.1.0 → 5.1.1

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 (6) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/core/palette.css +204 -0
  3. package/css/theme.css +15 -22
  4. package/dist/opui.css +219 -23
  5. package/dist/opui.css.map +1 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # Changelog
2
2
 
3
+ ## 5.1.1 - 2026-05-29
4
+
5
+ ### Added
6
+
7
+ - Added CSS `@property` types to the palette (`--color-*` and `--gray-*`) variables to hopefully improve perf.
8
+
9
+ ### Changed
10
+
11
+ - Cleaned up comments and theme variable organization in `css/theme.css`.
12
+
3
13
  ## 5.1.0 - 2026-05-28
4
14
 
5
15
  ### Fixed
package/core/palette.css CHANGED
@@ -1,3 +1,207 @@
1
+ @property --color-1 {
2
+ syntax: "<color>";
3
+ inherits: true;
4
+ initial-value: transparent;
5
+ }
6
+
7
+ @property --color-2 {
8
+ syntax: "<color>";
9
+ inherits: true;
10
+ initial-value: transparent;
11
+ }
12
+
13
+ @property --color-3 {
14
+ syntax: "<color>";
15
+ inherits: true;
16
+ initial-value: transparent;
17
+ }
18
+
19
+ @property --color-4 {
20
+ syntax: "<color>";
21
+ inherits: true;
22
+ initial-value: transparent;
23
+ }
24
+
25
+ @property --color-5 {
26
+ syntax: "<color>";
27
+ inherits: true;
28
+ initial-value: transparent;
29
+ }
30
+
31
+ @property --color-6 {
32
+ syntax: "<color>";
33
+ inherits: true;
34
+ initial-value: transparent;
35
+ }
36
+
37
+ @property --color-7 {
38
+ syntax: "<color>";
39
+ inherits: true;
40
+ initial-value: transparent;
41
+ }
42
+
43
+ @property --color-8 {
44
+ syntax: "<color>";
45
+ inherits: true;
46
+ initial-value: transparent;
47
+ }
48
+
49
+ @property --color-9 {
50
+ syntax: "<color>";
51
+ inherits: true;
52
+ initial-value: transparent;
53
+ }
54
+
55
+ @property --color-10 {
56
+ syntax: "<color>";
57
+ inherits: true;
58
+ initial-value: transparent;
59
+ }
60
+
61
+ @property --color-11 {
62
+ syntax: "<color>";
63
+ inherits: true;
64
+ initial-value: transparent;
65
+ }
66
+
67
+ @property --color-12 {
68
+ syntax: "<color>";
69
+ inherits: true;
70
+ initial-value: transparent;
71
+ }
72
+
73
+ @property --color-13 {
74
+ syntax: "<color>";
75
+ inherits: true;
76
+ initial-value: transparent;
77
+ }
78
+
79
+ @property --color-14 {
80
+ syntax: "<color>";
81
+ inherits: true;
82
+ initial-value: transparent;
83
+ }
84
+
85
+ @property --color-15 {
86
+ syntax: "<color>";
87
+ inherits: true;
88
+ initial-value: transparent;
89
+ }
90
+
91
+ @property --color-16 {
92
+ syntax: "<color>";
93
+ inherits: true;
94
+ initial-value: transparent;
95
+ }
96
+
97
+ @property --gray-1 {
98
+ syntax: "<color>";
99
+ inherits: true;
100
+ initial-value: transparent;
101
+ }
102
+
103
+ @property --gray-2 {
104
+ syntax: "<color>";
105
+ inherits: true;
106
+ initial-value: transparent;
107
+ }
108
+
109
+ @property --gray-3 {
110
+ syntax: "<color>";
111
+ inherits: true;
112
+ initial-value: transparent;
113
+ }
114
+
115
+ @property --gray-4 {
116
+ syntax: "<color>";
117
+ inherits: true;
118
+ initial-value: transparent;
119
+ }
120
+
121
+ @property --gray-5 {
122
+ syntax: "<color>";
123
+ inherits: true;
124
+ initial-value: transparent;
125
+ }
126
+
127
+ @property --gray-6 {
128
+ syntax: "<color>";
129
+ inherits: true;
130
+ initial-value: transparent;
131
+ }
132
+
133
+ @property --gray-7 {
134
+ syntax: "<color>";
135
+ inherits: true;
136
+ initial-value: transparent;
137
+ }
138
+
139
+ @property --gray-8 {
140
+ syntax: "<color>";
141
+ inherits: true;
142
+ initial-value: transparent;
143
+ }
144
+
145
+ @property --gray-9 {
146
+ syntax: "<color>";
147
+ inherits: true;
148
+ initial-value: transparent;
149
+ }
150
+
151
+ @property --gray-10 {
152
+ syntax: "<color>";
153
+ inherits: true;
154
+ initial-value: transparent;
155
+ }
156
+
157
+ @property --gray-11 {
158
+ syntax: "<color>";
159
+ inherits: true;
160
+ initial-value: transparent;
161
+ }
162
+
163
+ @property --gray-12 {
164
+ syntax: "<color>";
165
+ inherits: true;
166
+ initial-value: transparent;
167
+ }
168
+
169
+ @property --gray-13 {
170
+ syntax: "<color>";
171
+ inherits: true;
172
+ initial-value: transparent;
173
+ }
174
+
175
+ @property --gray-14 {
176
+ syntax: "<color>";
177
+ inherits: true;
178
+ initial-value: transparent;
179
+ }
180
+
181
+ @property --gray-15 {
182
+ syntax: "<color>";
183
+ inherits: true;
184
+ initial-value: transparent;
185
+ }
186
+
187
+ @property --gray-16 {
188
+ syntax: "<color>";
189
+ inherits: true;
190
+ initial-value: transparent;
191
+ }
192
+
193
+ @property --palette-source {
194
+ syntax: "<color>";
195
+ inherits: true;
196
+ initial-value: transparent;
197
+ }
198
+
199
+ @property --palette-hue {
200
+ syntax: "<number>";
201
+ inherits: true;
202
+ initial-value: 240;
203
+ }
204
+
1
205
  @layer theme.palette {
2
206
  :where(
3
207
  :root,
package/css/theme.css CHANGED
@@ -1,7 +1,5 @@
1
- /*
2
- theme three theme setup
3
- */
4
1
  @layer theme {
2
+
5
3
  /* 1. Color scheme */
6
4
  .ui-light {
7
5
  --color-scheme: light;
@@ -14,17 +12,16 @@
14
12
  :where(html) {
15
13
  color-scheme: var(--color-scheme, light dark);
16
14
 
17
- /* 2. Palette source - one value to rule them all. Every other color is derived from this one.
18
- Both light/dark branches are wired up via light-dark() so prefers-color-scheme works
19
- automatically. Set them to different OKLCH values if you want a distinct dark-mode palette. */
20
- --palette-source: light-dark(
21
- oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)),
22
- oklch(0.58 calc(0.21 * 0.5) var(--hue-blue))
23
- );
24
- --palette-hue-rotate-by: 0;
15
+ /* 2. Palette - override the values in core/palette.css */
16
+ --palette-hue: light-dark(var(--hue-green), var(--hue-blue));
17
+ --palette-chroma: 0.5;
18
+ /* --palette-source: oklch(.58 calc(.21 * .5) var(--hue-blue)); */
25
19
 
26
- /* Gray ramp lives in core/palette.css. Override --gray-chroma or
27
- --gray-hue here if this theme wants warmer/cooler grays. */
20
+ /* Gray palette also lives in core/palette.css. */
21
+ /*
22
+ --gray-hue: 255;
23
+ --gray-chroma: 0.01;
24
+ */
28
25
 
29
26
  /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
30
27
  --blue: oklch(from var(--color-9) l 0.2 210);
@@ -33,8 +30,8 @@
33
30
  --red: oklch(from var(--color-9) l 0.2 25);
34
31
 
35
32
  /* 4. Intent tokens
36
- Severity (have scope classes below): --success, --info, --warning, --critical
37
- Non-severity (value-only): --primary, --neutral */
33
+ Severity (have scope classes below): --success, --info, --warning, --critical
34
+ Non-severity (value-only): --primary, --neutral */
38
35
  --success: var(--green);
39
36
  --info: var(--blue);
40
37
  --warning: var(--orange);
@@ -64,8 +61,7 @@
64
61
  --border-radius: var(--size-2);
65
62
  --border-width: 1px;
66
63
 
67
- /* 9. Focus ring — components consume these and may override locally
68
- (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
64
+ /* 9. Focus ring */
69
65
  --focus-ring-color: var(--primary);
70
66
  --focus-ring-width: 2px;
71
67
  --focus-ring-offset: 2px;
@@ -82,8 +78,7 @@
82
78
  /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
83
79
  --font-size-05: 0.875rem;
84
80
 
85
- /* 11. Control sizes — shared scale for fields and buttons so they line up
86
- visually. --field-size-* and --button-size-* alias from --control-size-*. */
81
+ /* 11. Control sizes — shared scale for fields and buttons so they line up. */
87
82
  --control-size-x-small: 28px;
88
83
  --control-size-small: 32px;
89
84
  --control-size: 40px;
@@ -108,9 +103,7 @@
108
103
  --button-border-radius: var(--size-2);
109
104
  }
110
105
 
111
- /* 14. Severity scope classes — re-source the palette inside these contexts.
112
- Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
113
- Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
106
+ /* 14. Severity scope classes */
114
107
  :where(.ui-critical, [data-invalid], del) {
115
108
  --palette-source: oklch(0.58 0.21 var(--hue-red));
116
109
  --palette-hue-rotate-by: 1;
package/dist/opui.css CHANGED
@@ -997,6 +997,210 @@
997
997
 
998
998
  /* Theme */
999
999
 
1000
+ @property --color-1 {
1001
+ syntax: "<color>";
1002
+ inherits: true;
1003
+ initial-value: transparent;
1004
+ }
1005
+
1006
+ @property --color-2 {
1007
+ syntax: "<color>";
1008
+ inherits: true;
1009
+ initial-value: transparent;
1010
+ }
1011
+
1012
+ @property --color-3 {
1013
+ syntax: "<color>";
1014
+ inherits: true;
1015
+ initial-value: transparent;
1016
+ }
1017
+
1018
+ @property --color-4 {
1019
+ syntax: "<color>";
1020
+ inherits: true;
1021
+ initial-value: transparent;
1022
+ }
1023
+
1024
+ @property --color-5 {
1025
+ syntax: "<color>";
1026
+ inherits: true;
1027
+ initial-value: transparent;
1028
+ }
1029
+
1030
+ @property --color-6 {
1031
+ syntax: "<color>";
1032
+ inherits: true;
1033
+ initial-value: transparent;
1034
+ }
1035
+
1036
+ @property --color-7 {
1037
+ syntax: "<color>";
1038
+ inherits: true;
1039
+ initial-value: transparent;
1040
+ }
1041
+
1042
+ @property --color-8 {
1043
+ syntax: "<color>";
1044
+ inherits: true;
1045
+ initial-value: transparent;
1046
+ }
1047
+
1048
+ @property --color-9 {
1049
+ syntax: "<color>";
1050
+ inherits: true;
1051
+ initial-value: transparent;
1052
+ }
1053
+
1054
+ @property --color-10 {
1055
+ syntax: "<color>";
1056
+ inherits: true;
1057
+ initial-value: transparent;
1058
+ }
1059
+
1060
+ @property --color-11 {
1061
+ syntax: "<color>";
1062
+ inherits: true;
1063
+ initial-value: transparent;
1064
+ }
1065
+
1066
+ @property --color-12 {
1067
+ syntax: "<color>";
1068
+ inherits: true;
1069
+ initial-value: transparent;
1070
+ }
1071
+
1072
+ @property --color-13 {
1073
+ syntax: "<color>";
1074
+ inherits: true;
1075
+ initial-value: transparent;
1076
+ }
1077
+
1078
+ @property --color-14 {
1079
+ syntax: "<color>";
1080
+ inherits: true;
1081
+ initial-value: transparent;
1082
+ }
1083
+
1084
+ @property --color-15 {
1085
+ syntax: "<color>";
1086
+ inherits: true;
1087
+ initial-value: transparent;
1088
+ }
1089
+
1090
+ @property --color-16 {
1091
+ syntax: "<color>";
1092
+ inherits: true;
1093
+ initial-value: transparent;
1094
+ }
1095
+
1096
+ @property --gray-1 {
1097
+ syntax: "<color>";
1098
+ inherits: true;
1099
+ initial-value: transparent;
1100
+ }
1101
+
1102
+ @property --gray-2 {
1103
+ syntax: "<color>";
1104
+ inherits: true;
1105
+ initial-value: transparent;
1106
+ }
1107
+
1108
+ @property --gray-3 {
1109
+ syntax: "<color>";
1110
+ inherits: true;
1111
+ initial-value: transparent;
1112
+ }
1113
+
1114
+ @property --gray-4 {
1115
+ syntax: "<color>";
1116
+ inherits: true;
1117
+ initial-value: transparent;
1118
+ }
1119
+
1120
+ @property --gray-5 {
1121
+ syntax: "<color>";
1122
+ inherits: true;
1123
+ initial-value: transparent;
1124
+ }
1125
+
1126
+ @property --gray-6 {
1127
+ syntax: "<color>";
1128
+ inherits: true;
1129
+ initial-value: transparent;
1130
+ }
1131
+
1132
+ @property --gray-7 {
1133
+ syntax: "<color>";
1134
+ inherits: true;
1135
+ initial-value: transparent;
1136
+ }
1137
+
1138
+ @property --gray-8 {
1139
+ syntax: "<color>";
1140
+ inherits: true;
1141
+ initial-value: transparent;
1142
+ }
1143
+
1144
+ @property --gray-9 {
1145
+ syntax: "<color>";
1146
+ inherits: true;
1147
+ initial-value: transparent;
1148
+ }
1149
+
1150
+ @property --gray-10 {
1151
+ syntax: "<color>";
1152
+ inherits: true;
1153
+ initial-value: transparent;
1154
+ }
1155
+
1156
+ @property --gray-11 {
1157
+ syntax: "<color>";
1158
+ inherits: true;
1159
+ initial-value: transparent;
1160
+ }
1161
+
1162
+ @property --gray-12 {
1163
+ syntax: "<color>";
1164
+ inherits: true;
1165
+ initial-value: transparent;
1166
+ }
1167
+
1168
+ @property --gray-13 {
1169
+ syntax: "<color>";
1170
+ inherits: true;
1171
+ initial-value: transparent;
1172
+ }
1173
+
1174
+ @property --gray-14 {
1175
+ syntax: "<color>";
1176
+ inherits: true;
1177
+ initial-value: transparent;
1178
+ }
1179
+
1180
+ @property --gray-15 {
1181
+ syntax: "<color>";
1182
+ inherits: true;
1183
+ initial-value: transparent;
1184
+ }
1185
+
1186
+ @property --gray-16 {
1187
+ syntax: "<color>";
1188
+ inherits: true;
1189
+ initial-value: transparent;
1190
+ }
1191
+
1192
+ @property --palette-source {
1193
+ syntax: "<color>";
1194
+ inherits: true;
1195
+ initial-value: transparent;
1196
+ }
1197
+
1198
+ @property --palette-hue {
1199
+ syntax: "<number>";
1200
+ inherits: true;
1201
+ initial-value: 240;
1202
+ }
1203
+
1000
1204
  @layer theme.palette {
1001
1205
  :where(
1002
1206
  :root,
@@ -1108,11 +1312,8 @@
1108
1312
  }
1109
1313
  }
1110
1314
 
1111
- /*
1112
- theme three theme setup
1113
- */
1114
-
1115
1315
  @layer theme {
1316
+
1116
1317
  /* 1. Color scheme */
1117
1318
  .ui-light {
1118
1319
  --color-scheme: light;
@@ -1125,17 +1326,16 @@
1125
1326
  :where(html) {
1126
1327
  color-scheme: var(--color-scheme, light dark);
1127
1328
 
1128
- /* 2. Palette source - one value to rule them all. Every other color is derived from this one.
1129
- Both light/dark branches are wired up via light-dark() so prefers-color-scheme works
1130
- automatically. Set them to different OKLCH values if you want a distinct dark-mode palette. */
1131
- --palette-source: light-dark(
1132
- oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)),
1133
- oklch(0.58 calc(0.21 * 0.5) var(--hue-blue))
1134
- );
1135
- --palette-hue-rotate-by: 0;
1329
+ /* 2. Palette - override the values in core/palette.css */
1330
+ --palette-hue: light-dark(var(--hue-green), var(--hue-blue));
1331
+ --palette-chroma: 0.5;
1332
+ /* --palette-source: oklch(.58 calc(.21 * .5) var(--hue-blue)); */
1136
1333
 
1137
- /* Gray ramp lives in core/palette.css. Override --gray-chroma or
1138
- --gray-hue here if this theme wants warmer/cooler grays. */
1334
+ /* Gray palette also lives in core/palette.css. */
1335
+ /*
1336
+ --gray-hue: 255;
1337
+ --gray-chroma: 0.01;
1338
+ */
1139
1339
 
1140
1340
  /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
1141
1341
  --blue: oklch(from var(--color-9) l 0.2 210);
@@ -1144,8 +1344,8 @@
1144
1344
  --red: oklch(from var(--color-9) l 0.2 25);
1145
1345
 
1146
1346
  /* 4. Intent tokens
1147
- Severity (have scope classes below): --success, --info, --warning, --critical
1148
- Non-severity (value-only): --primary, --neutral */
1347
+ Severity (have scope classes below): --success, --info, --warning, --critical
1348
+ Non-severity (value-only): --primary, --neutral */
1149
1349
  --success: var(--green);
1150
1350
  --info: var(--blue);
1151
1351
  --warning: var(--orange);
@@ -1175,8 +1375,7 @@
1175
1375
  --border-radius: var(--size-2);
1176
1376
  --border-width: 1px;
1177
1377
 
1178
- /* 9. Focus ring — components consume these and may override locally
1179
- (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
1378
+ /* 9. Focus ring */
1180
1379
  --focus-ring-color: var(--primary);
1181
1380
  --focus-ring-width: 2px;
1182
1381
  --focus-ring-offset: 2px;
@@ -1193,8 +1392,7 @@
1193
1392
  /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
1194
1393
  --font-size-05: 0.875rem;
1195
1394
 
1196
- /* 11. Control sizes — shared scale for fields and buttons so they line up
1197
- visually. --field-size-* and --button-size-* alias from --control-size-*. */
1395
+ /* 11. Control sizes — shared scale for fields and buttons so they line up. */
1198
1396
  --control-size-x-small: 28px;
1199
1397
  --control-size-small: 32px;
1200
1398
  --control-size: 40px;
@@ -1219,9 +1417,7 @@
1219
1417
  --button-border-radius: var(--size-2);
1220
1418
  }
1221
1419
 
1222
- /* 14. Severity scope classes — re-source the palette inside these contexts.
1223
- Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
1224
- Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
1420
+ /* 14. Severity scope classes */
1225
1421
  :where(.ui-critical, [data-invalid], del) {
1226
1422
  --palette-source: oklch(0.58 0.21 var(--hue-red));
1227
1423
  --palette-hue-rotate-by: 1;