@rolemodel/optics 2.5.0 → 2.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.
- package/.agents/skills/github-release/SKILL.md +143 -0
- package/.github/workflows/linting.yml +2 -0
- package/.prettierignore +3 -0
- package/.yarn/install-state.gz +0 -0
- package/CHANGELOG.md +47 -0
- package/README.md +16 -0
- package/build_token_json.js +2 -1
- package/dist/README.md +16 -0
- package/dist/css/components/table.css +10 -0
- package/dist/css/core/tokens/base_color_tokens.css +74 -0
- package/dist/css/core/tokens/base_tokens.css +3 -345
- package/dist/css/core/tokens/index.css +2 -1
- package/dist/css/core/tokens/oklch/base_color_tokens.css +74 -0
- package/dist/css/core/tokens/oklch/index.css +3 -0
- package/dist/css/core/tokens/oklch/scale_color_tokens.css +1498 -0
- package/dist/css/core/tokens/shared_tokens.css +272 -0
- package/dist/css/optics+feather_icons.css +84 -73
- package/dist/css/optics+feather_icons.min.css +1 -1
- package/dist/css/optics+lucide_icons.css +84 -73
- package/dist/css/optics+lucide_icons.min.css +1 -1
- package/dist/css/optics+material_outlined_variable.css +84 -73
- package/dist/css/optics+material_outlined_variable.min.css +1 -1
- package/dist/css/optics+no_icons.css +84 -73
- package/dist/css/optics+no_icons.min.css +1 -1
- package/dist/css/optics+phosphor_icons.css +84 -73
- package/dist/css/optics+phosphor_icons.min.css +1 -1
- package/dist/css/optics+tabler_icons.css +84 -73
- package/dist/css/optics+tabler_icons.min.css +1 -1
- package/dist/css/optics-oklch+feather_icons.css +6566 -0
- package/dist/css/optics-oklch+feather_icons.min.css +1 -0
- package/dist/css/optics-oklch+lucide_icons.css +13598 -0
- package/dist/css/optics-oklch+lucide_icons.min.css +1 -0
- package/dist/css/optics-oklch+material_outlined_variable.css +5636 -0
- package/dist/css/optics-oklch+material_outlined_variable.min.css +1 -0
- package/dist/css/optics-oklch+no_icons.css +5627 -0
- package/dist/css/optics-oklch+no_icons.min.css +1 -0
- package/dist/css/optics-oklch+phosphor_icons.css +5671 -0
- package/dist/css/optics-oklch+phosphor_icons.min.css +1 -0
- package/dist/css/optics-oklch+tabler_icons.css +5638 -0
- package/dist/css/optics-oklch+tabler_icons.min.css +1 -0
- package/dist/css/optics-oklch.css +5640 -0
- package/dist/css/optics-oklch.min.css +1 -0
- package/dist/css/optics.css +84 -73
- package/dist/css/optics.min.css +1 -1
- package/dist/package.json +10 -6
- package/dist/tokens/tokens.json +16 -16
- package/dist/tools/check-contrast.cjs +46 -0
- package/dist/tools/contrast/builds/build.cjs +44 -0
- package/dist/tools/contrast/builds/hsl-build.cjs +11 -0
- package/dist/tools/contrast/builds/oklch-build.cjs +11 -0
- package/dist/tools/contrast/calc-expression.cjs +68 -0
- package/dist/tools/contrast/check-error.cjs +4 -0
- package/dist/tools/contrast/color-pair.cjs +35 -0
- package/dist/tools/contrast/colors/color.cjs +41 -0
- package/dist/tools/contrast/colors/function-color.cjs +46 -0
- package/dist/tools/contrast/colors/hex-color.cjs +19 -0
- package/dist/tools/contrast/colors/hsl-color.cjs +25 -0
- package/dist/tools/contrast/colors/oklch-color.cjs +36 -0
- package/dist/tools/contrast/colors/themed-color.cjs +37 -0
- package/dist/tools/contrast/contrast-check.cjs +36 -0
- package/dist/tools/contrast/contrast-reporter.cjs +43 -0
- package/dist/tools/contrast/contrast-result.cjs +15 -0
- package/dist/tools/contrast/css-syntax.cjs +23 -0
- package/dist/tools/contrast/stylesheet.cjs +174 -0
- package/dist/tools/contrast/theme.cjs +84 -0
- package/dist/tools/contrast/tool-options.cjs +43 -0
- package/package.json +10 -6
|
@@ -138,67 +138,6 @@ Noto Sans supports:
|
|
|
138
138
|
|
|
139
139
|
/* Tokens */
|
|
140
140
|
:root {
|
|
141
|
-
/* Color HSLs
|
|
142
|
-
A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
|
|
143
|
-
*/
|
|
144
|
-
|
|
145
|
-
/* Basic Colors */
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* @tokens Basic Colors
|
|
149
|
-
* @presenter Color
|
|
150
|
-
*/
|
|
151
|
-
--op-color-white: hsl(0deg 100% 100%);
|
|
152
|
-
--op-color-black: hsl(0deg 0% 0%);
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* @tokens Primary Colors
|
|
156
|
-
* @presenter Color
|
|
157
|
-
*/
|
|
158
|
-
--op-color-primary-h: 216;
|
|
159
|
-
--op-color-primary-s: 58%;
|
|
160
|
-
--op-color-primary-l: 48%;
|
|
161
|
-
|
|
162
|
-
/**
|
|
163
|
-
* @tokens Neutral Colors
|
|
164
|
-
* @presenter Color
|
|
165
|
-
*/
|
|
166
|
-
--op-color-neutral-h: var(--op-color-primary-h);
|
|
167
|
-
--op-color-neutral-s: 4%;
|
|
168
|
-
--op-color-neutral-l: var(--op-color-primary-l);
|
|
169
|
-
|
|
170
|
-
/**
|
|
171
|
-
* @tokens Alerts Warning Colors
|
|
172
|
-
* @presenter Color
|
|
173
|
-
*/
|
|
174
|
-
--op-color-alerts-warning-h: 47;
|
|
175
|
-
--op-color-alerts-warning-s: 100%;
|
|
176
|
-
--op-color-alerts-warning-l: 61%;
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* @tokens Alerts Danger Colors
|
|
180
|
-
* @presenter Color
|
|
181
|
-
*/
|
|
182
|
-
--op-color-alerts-danger-h: 0;
|
|
183
|
-
--op-color-alerts-danger-s: 99%;
|
|
184
|
-
--op-color-alerts-danger-l: 76%;
|
|
185
|
-
|
|
186
|
-
/**
|
|
187
|
-
* @tokens Alerts Info Colors
|
|
188
|
-
* @presenter Color
|
|
189
|
-
*/
|
|
190
|
-
--op-color-alerts-info-h: 216;
|
|
191
|
-
--op-color-alerts-info-s: 58%;
|
|
192
|
-
--op-color-alerts-info-l: 48%;
|
|
193
|
-
|
|
194
|
-
/**
|
|
195
|
-
* @tokens Alerts Notice Colors
|
|
196
|
-
* @presenter Color
|
|
197
|
-
*/
|
|
198
|
-
--op-color-alerts-notice-h: 130;
|
|
199
|
-
--op-color-alerts-notice-s: 61%;
|
|
200
|
-
--op-color-alerts-notice-l: 64%;
|
|
201
|
-
|
|
202
141
|
/**
|
|
203
142
|
* @tokens Opacities
|
|
204
143
|
* @presenter Opacity
|
|
@@ -388,18 +327,6 @@ Noto Sans supports:
|
|
|
388
327
|
--op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
|
|
389
328
|
--op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
|
|
390
329
|
|
|
391
|
-
/* Shadows */
|
|
392
|
-
|
|
393
|
-
/**
|
|
394
|
-
* @tokens Shadows
|
|
395
|
-
* @presenter Shadow
|
|
396
|
-
*/
|
|
397
|
-
--op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
|
|
398
|
-
--op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
|
|
399
|
-
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
|
|
400
|
-
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
|
|
401
|
-
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
|
|
402
|
-
|
|
403
330
|
/* Z Index */
|
|
404
331
|
|
|
405
332
|
/**
|
|
@@ -482,6 +409,80 @@ Noto Sans supports:
|
|
|
482
409
|
inset-inline-end: -100%;
|
|
483
410
|
}
|
|
484
411
|
}
|
|
412
|
+
:root {
|
|
413
|
+
/* Color HSLs
|
|
414
|
+
A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
|
|
415
|
+
*/
|
|
416
|
+
|
|
417
|
+
/* Basic Colors */
|
|
418
|
+
|
|
419
|
+
/**
|
|
420
|
+
* @tokens Basic Colors
|
|
421
|
+
* @presenter Color
|
|
422
|
+
*/
|
|
423
|
+
--op-color-white: hsl(0deg 100% 100%);
|
|
424
|
+
--op-color-black: hsl(0deg 0% 0%);
|
|
425
|
+
|
|
426
|
+
/**
|
|
427
|
+
* @tokens Primary Colors
|
|
428
|
+
* @presenter Color
|
|
429
|
+
*/
|
|
430
|
+
--op-color-primary-h: 216;
|
|
431
|
+
--op-color-primary-s: 58%;
|
|
432
|
+
--op-color-primary-l: 48%;
|
|
433
|
+
|
|
434
|
+
/**
|
|
435
|
+
* @tokens Neutral Colors
|
|
436
|
+
* @presenter Color
|
|
437
|
+
*/
|
|
438
|
+
--op-color-neutral-h: var(--op-color-primary-h);
|
|
439
|
+
--op-color-neutral-s: 4%;
|
|
440
|
+
--op-color-neutral-l: var(--op-color-primary-l);
|
|
441
|
+
|
|
442
|
+
/**
|
|
443
|
+
* @tokens Alerts Warning Colors
|
|
444
|
+
* @presenter Color
|
|
445
|
+
*/
|
|
446
|
+
--op-color-alerts-warning-h: 47;
|
|
447
|
+
--op-color-alerts-warning-s: 100%;
|
|
448
|
+
--op-color-alerts-warning-l: 61%;
|
|
449
|
+
|
|
450
|
+
/**
|
|
451
|
+
* @tokens Alerts Danger Colors
|
|
452
|
+
* @presenter Color
|
|
453
|
+
*/
|
|
454
|
+
--op-color-alerts-danger-h: 0;
|
|
455
|
+
--op-color-alerts-danger-s: 99%;
|
|
456
|
+
--op-color-alerts-danger-l: 76%;
|
|
457
|
+
|
|
458
|
+
/**
|
|
459
|
+
* @tokens Alerts Info Colors
|
|
460
|
+
* @presenter Color
|
|
461
|
+
*/
|
|
462
|
+
--op-color-alerts-info-h: 216;
|
|
463
|
+
--op-color-alerts-info-s: 58%;
|
|
464
|
+
--op-color-alerts-info-l: 48%;
|
|
465
|
+
|
|
466
|
+
/**
|
|
467
|
+
* @tokens Alerts Notice Colors
|
|
468
|
+
* @presenter Color
|
|
469
|
+
*/
|
|
470
|
+
--op-color-alerts-notice-h: 130;
|
|
471
|
+
--op-color-alerts-notice-s: 61%;
|
|
472
|
+
--op-color-alerts-notice-l: 64%;
|
|
473
|
+
|
|
474
|
+
/* Shadows */
|
|
475
|
+
|
|
476
|
+
/**
|
|
477
|
+
* @tokens Shadows
|
|
478
|
+
* @presenter Shadow
|
|
479
|
+
*/
|
|
480
|
+
--op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
|
|
481
|
+
--op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
|
|
482
|
+
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
|
|
483
|
+
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
|
|
484
|
+
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
|
|
485
|
+
}
|
|
485
486
|
:root {
|
|
486
487
|
/* Enable light and dark mode switching */
|
|
487
488
|
color-scheme: light dark;
|
|
@@ -5247,28 +5248,37 @@ dialog.modal {
|
|
|
5247
5248
|
}
|
|
5248
5249
|
|
|
5249
5250
|
/* Layout Modifiers */
|
|
5251
|
+
/* The *-layout names are kept for backwards compatibility */
|
|
5252
|
+
&.table--layout-auto,
|
|
5250
5253
|
&.table--auto-layout {
|
|
5251
5254
|
table-layout: auto;
|
|
5252
5255
|
}
|
|
5253
5256
|
|
|
5257
|
+
&.table--layout-fixed,
|
|
5254
5258
|
&.table--fixed-layout {
|
|
5255
5259
|
table-layout: fixed;
|
|
5256
5260
|
}
|
|
5257
5261
|
|
|
5258
5262
|
/* Table Density Modifiers */
|
|
5263
|
+
/* The *-density names are kept for backwards compatibility */
|
|
5264
|
+
&.table--density-default,
|
|
5259
5265
|
&.table--default-density {
|
|
5260
5266
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
5261
5267
|
}
|
|
5262
5268
|
|
|
5269
|
+
&.table--density-comfortable,
|
|
5263
5270
|
&.table--comfortable-density {
|
|
5264
5271
|
--__op-table-cell-height: var(--_op-table-cell-height-comfortable);
|
|
5265
5272
|
}
|
|
5266
5273
|
|
|
5274
|
+
&.table--density-compact,
|
|
5267
5275
|
&.table--compact-density {
|
|
5268
5276
|
--__op-table-cell-height: var(--_op-table-cell-height-compact);
|
|
5269
5277
|
}
|
|
5270
5278
|
|
|
5271
5279
|
/* Striped Modifiers */
|
|
5280
|
+
/* The *-striped names are kept for backwards compatibility */
|
|
5281
|
+
&.table--striped-even,
|
|
5272
5282
|
&.table--even-striped {
|
|
5273
5283
|
tbody tr:nth-child(even) {
|
|
5274
5284
|
background-color: var(--op-color-neutral-plus-seven);
|
|
@@ -5276,6 +5286,7 @@ dialog.modal {
|
|
|
5276
5286
|
}
|
|
5277
5287
|
}
|
|
5278
5288
|
|
|
5289
|
+
&.table--striped-odd,
|
|
5279
5290
|
&.table--odd-striped {
|
|
5280
5291
|
tbody tr:nth-child(odd) {
|
|
5281
5292
|
background-color: var(--op-color-neutral-plus-seven);
|