@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
|
@@ -94,67 +94,6 @@ Noto Sans supports:
|
|
|
94
94
|
|
|
95
95
|
/* Tokens */
|
|
96
96
|
:root {
|
|
97
|
-
/* Color HSLs
|
|
98
|
-
A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
|
|
99
|
-
*/
|
|
100
|
-
|
|
101
|
-
/* Basic Colors */
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* @tokens Basic Colors
|
|
105
|
-
* @presenter Color
|
|
106
|
-
*/
|
|
107
|
-
--op-color-white: hsl(0deg 100% 100%);
|
|
108
|
-
--op-color-black: hsl(0deg 0% 0%);
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* @tokens Primary Colors
|
|
112
|
-
* @presenter Color
|
|
113
|
-
*/
|
|
114
|
-
--op-color-primary-h: 216;
|
|
115
|
-
--op-color-primary-s: 58%;
|
|
116
|
-
--op-color-primary-l: 48%;
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* @tokens Neutral Colors
|
|
120
|
-
* @presenter Color
|
|
121
|
-
*/
|
|
122
|
-
--op-color-neutral-h: var(--op-color-primary-h);
|
|
123
|
-
--op-color-neutral-s: 4%;
|
|
124
|
-
--op-color-neutral-l: var(--op-color-primary-l);
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* @tokens Alerts Warning Colors
|
|
128
|
-
* @presenter Color
|
|
129
|
-
*/
|
|
130
|
-
--op-color-alerts-warning-h: 47;
|
|
131
|
-
--op-color-alerts-warning-s: 100%;
|
|
132
|
-
--op-color-alerts-warning-l: 61%;
|
|
133
|
-
|
|
134
|
-
/**
|
|
135
|
-
* @tokens Alerts Danger Colors
|
|
136
|
-
* @presenter Color
|
|
137
|
-
*/
|
|
138
|
-
--op-color-alerts-danger-h: 0;
|
|
139
|
-
--op-color-alerts-danger-s: 99%;
|
|
140
|
-
--op-color-alerts-danger-l: 76%;
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* @tokens Alerts Info Colors
|
|
144
|
-
* @presenter Color
|
|
145
|
-
*/
|
|
146
|
-
--op-color-alerts-info-h: 216;
|
|
147
|
-
--op-color-alerts-info-s: 58%;
|
|
148
|
-
--op-color-alerts-info-l: 48%;
|
|
149
|
-
|
|
150
|
-
/**
|
|
151
|
-
* @tokens Alerts Notice Colors
|
|
152
|
-
* @presenter Color
|
|
153
|
-
*/
|
|
154
|
-
--op-color-alerts-notice-h: 130;
|
|
155
|
-
--op-color-alerts-notice-s: 61%;
|
|
156
|
-
--op-color-alerts-notice-l: 64%;
|
|
157
|
-
|
|
158
97
|
/**
|
|
159
98
|
* @tokens Opacities
|
|
160
99
|
* @presenter Opacity
|
|
@@ -344,18 +283,6 @@ Noto Sans supports:
|
|
|
344
283
|
--op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
|
|
345
284
|
--op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
|
|
346
285
|
|
|
347
|
-
/* Shadows */
|
|
348
|
-
|
|
349
|
-
/**
|
|
350
|
-
* @tokens Shadows
|
|
351
|
-
* @presenter Shadow
|
|
352
|
-
*/
|
|
353
|
-
--op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
|
|
354
|
-
--op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
|
|
355
|
-
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
|
|
356
|
-
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
|
|
357
|
-
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
|
|
358
|
-
|
|
359
286
|
/* Z Index */
|
|
360
287
|
|
|
361
288
|
/**
|
|
@@ -438,6 +365,80 @@ Noto Sans supports:
|
|
|
438
365
|
inset-inline-end: -100%;
|
|
439
366
|
}
|
|
440
367
|
}
|
|
368
|
+
:root {
|
|
369
|
+
/* Color HSLs
|
|
370
|
+
A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
|
|
371
|
+
*/
|
|
372
|
+
|
|
373
|
+
/* Basic Colors */
|
|
374
|
+
|
|
375
|
+
/**
|
|
376
|
+
* @tokens Basic Colors
|
|
377
|
+
* @presenter Color
|
|
378
|
+
*/
|
|
379
|
+
--op-color-white: hsl(0deg 100% 100%);
|
|
380
|
+
--op-color-black: hsl(0deg 0% 0%);
|
|
381
|
+
|
|
382
|
+
/**
|
|
383
|
+
* @tokens Primary Colors
|
|
384
|
+
* @presenter Color
|
|
385
|
+
*/
|
|
386
|
+
--op-color-primary-h: 216;
|
|
387
|
+
--op-color-primary-s: 58%;
|
|
388
|
+
--op-color-primary-l: 48%;
|
|
389
|
+
|
|
390
|
+
/**
|
|
391
|
+
* @tokens Neutral Colors
|
|
392
|
+
* @presenter Color
|
|
393
|
+
*/
|
|
394
|
+
--op-color-neutral-h: var(--op-color-primary-h);
|
|
395
|
+
--op-color-neutral-s: 4%;
|
|
396
|
+
--op-color-neutral-l: var(--op-color-primary-l);
|
|
397
|
+
|
|
398
|
+
/**
|
|
399
|
+
* @tokens Alerts Warning Colors
|
|
400
|
+
* @presenter Color
|
|
401
|
+
*/
|
|
402
|
+
--op-color-alerts-warning-h: 47;
|
|
403
|
+
--op-color-alerts-warning-s: 100%;
|
|
404
|
+
--op-color-alerts-warning-l: 61%;
|
|
405
|
+
|
|
406
|
+
/**
|
|
407
|
+
* @tokens Alerts Danger Colors
|
|
408
|
+
* @presenter Color
|
|
409
|
+
*/
|
|
410
|
+
--op-color-alerts-danger-h: 0;
|
|
411
|
+
--op-color-alerts-danger-s: 99%;
|
|
412
|
+
--op-color-alerts-danger-l: 76%;
|
|
413
|
+
|
|
414
|
+
/**
|
|
415
|
+
* @tokens Alerts Info Colors
|
|
416
|
+
* @presenter Color
|
|
417
|
+
*/
|
|
418
|
+
--op-color-alerts-info-h: 216;
|
|
419
|
+
--op-color-alerts-info-s: 58%;
|
|
420
|
+
--op-color-alerts-info-l: 48%;
|
|
421
|
+
|
|
422
|
+
/**
|
|
423
|
+
* @tokens Alerts Notice Colors
|
|
424
|
+
* @presenter Color
|
|
425
|
+
*/
|
|
426
|
+
--op-color-alerts-notice-h: 130;
|
|
427
|
+
--op-color-alerts-notice-s: 61%;
|
|
428
|
+
--op-color-alerts-notice-l: 64%;
|
|
429
|
+
|
|
430
|
+
/* Shadows */
|
|
431
|
+
|
|
432
|
+
/**
|
|
433
|
+
* @tokens Shadows
|
|
434
|
+
* @presenter Shadow
|
|
435
|
+
*/
|
|
436
|
+
--op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
|
|
437
|
+
--op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
|
|
438
|
+
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
|
|
439
|
+
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
|
|
440
|
+
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
|
|
441
|
+
}
|
|
441
442
|
:root {
|
|
442
443
|
/* Enable light and dark mode switching */
|
|
443
444
|
color-scheme: light dark;
|
|
@@ -5203,28 +5204,37 @@ dialog.modal {
|
|
|
5203
5204
|
}
|
|
5204
5205
|
|
|
5205
5206
|
/* Layout Modifiers */
|
|
5207
|
+
/* The *-layout names are kept for backwards compatibility */
|
|
5208
|
+
&.table--layout-auto,
|
|
5206
5209
|
&.table--auto-layout {
|
|
5207
5210
|
table-layout: auto;
|
|
5208
5211
|
}
|
|
5209
5212
|
|
|
5213
|
+
&.table--layout-fixed,
|
|
5210
5214
|
&.table--fixed-layout {
|
|
5211
5215
|
table-layout: fixed;
|
|
5212
5216
|
}
|
|
5213
5217
|
|
|
5214
5218
|
/* Table Density Modifiers */
|
|
5219
|
+
/* The *-density names are kept for backwards compatibility */
|
|
5220
|
+
&.table--density-default,
|
|
5215
5221
|
&.table--default-density {
|
|
5216
5222
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
5217
5223
|
}
|
|
5218
5224
|
|
|
5225
|
+
&.table--density-comfortable,
|
|
5219
5226
|
&.table--comfortable-density {
|
|
5220
5227
|
--__op-table-cell-height: var(--_op-table-cell-height-comfortable);
|
|
5221
5228
|
}
|
|
5222
5229
|
|
|
5230
|
+
&.table--density-compact,
|
|
5223
5231
|
&.table--compact-density {
|
|
5224
5232
|
--__op-table-cell-height: var(--_op-table-cell-height-compact);
|
|
5225
5233
|
}
|
|
5226
5234
|
|
|
5227
5235
|
/* Striped Modifiers */
|
|
5236
|
+
/* The *-striped names are kept for backwards compatibility */
|
|
5237
|
+
&.table--striped-even,
|
|
5228
5238
|
&.table--even-striped {
|
|
5229
5239
|
tbody tr:nth-child(even) {
|
|
5230
5240
|
background-color: var(--op-color-neutral-plus-seven);
|
|
@@ -5232,6 +5242,7 @@ dialog.modal {
|
|
|
5232
5242
|
}
|
|
5233
5243
|
}
|
|
5234
5244
|
|
|
5245
|
+
&.table--striped-odd,
|
|
5235
5246
|
&.table--odd-striped {
|
|
5236
5247
|
tbody tr:nth-child(odd) {
|
|
5237
5248
|
background-color: var(--op-color-neutral-plus-seven);
|