@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
|
@@ -105,67 +105,6 @@ Noto Sans supports:
|
|
|
105
105
|
|
|
106
106
|
/* Tokens */
|
|
107
107
|
:root {
|
|
108
|
-
/* Color HSLs
|
|
109
|
-
A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
|
|
110
|
-
*/
|
|
111
|
-
|
|
112
|
-
/* Basic Colors */
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* @tokens Basic Colors
|
|
116
|
-
* @presenter Color
|
|
117
|
-
*/
|
|
118
|
-
--op-color-white: hsl(0deg 100% 100%);
|
|
119
|
-
--op-color-black: hsl(0deg 0% 0%);
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* @tokens Primary Colors
|
|
123
|
-
* @presenter Color
|
|
124
|
-
*/
|
|
125
|
-
--op-color-primary-h: 216;
|
|
126
|
-
--op-color-primary-s: 58%;
|
|
127
|
-
--op-color-primary-l: 48%;
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* @tokens Neutral Colors
|
|
131
|
-
* @presenter Color
|
|
132
|
-
*/
|
|
133
|
-
--op-color-neutral-h: var(--op-color-primary-h);
|
|
134
|
-
--op-color-neutral-s: 4%;
|
|
135
|
-
--op-color-neutral-l: var(--op-color-primary-l);
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* @tokens Alerts Warning Colors
|
|
139
|
-
* @presenter Color
|
|
140
|
-
*/
|
|
141
|
-
--op-color-alerts-warning-h: 47;
|
|
142
|
-
--op-color-alerts-warning-s: 100%;
|
|
143
|
-
--op-color-alerts-warning-l: 61%;
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* @tokens Alerts Danger Colors
|
|
147
|
-
* @presenter Color
|
|
148
|
-
*/
|
|
149
|
-
--op-color-alerts-danger-h: 0;
|
|
150
|
-
--op-color-alerts-danger-s: 99%;
|
|
151
|
-
--op-color-alerts-danger-l: 76%;
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* @tokens Alerts Info Colors
|
|
155
|
-
* @presenter Color
|
|
156
|
-
*/
|
|
157
|
-
--op-color-alerts-info-h: 216;
|
|
158
|
-
--op-color-alerts-info-s: 58%;
|
|
159
|
-
--op-color-alerts-info-l: 48%;
|
|
160
|
-
|
|
161
|
-
/**
|
|
162
|
-
* @tokens Alerts Notice Colors
|
|
163
|
-
* @presenter Color
|
|
164
|
-
*/
|
|
165
|
-
--op-color-alerts-notice-h: 130;
|
|
166
|
-
--op-color-alerts-notice-s: 61%;
|
|
167
|
-
--op-color-alerts-notice-l: 64%;
|
|
168
|
-
|
|
169
108
|
/**
|
|
170
109
|
* @tokens Opacities
|
|
171
110
|
* @presenter Opacity
|
|
@@ -355,18 +294,6 @@ Noto Sans supports:
|
|
|
355
294
|
--op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
|
|
356
295
|
--op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
|
|
357
296
|
|
|
358
|
-
/* Shadows */
|
|
359
|
-
|
|
360
|
-
/**
|
|
361
|
-
* @tokens Shadows
|
|
362
|
-
* @presenter Shadow
|
|
363
|
-
*/
|
|
364
|
-
--op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
|
|
365
|
-
--op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
|
|
366
|
-
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
|
|
367
|
-
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
|
|
368
|
-
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
|
|
369
|
-
|
|
370
297
|
/* Z Index */
|
|
371
298
|
|
|
372
299
|
/**
|
|
@@ -449,6 +376,80 @@ Noto Sans supports:
|
|
|
449
376
|
inset-inline-end: -100%;
|
|
450
377
|
}
|
|
451
378
|
}
|
|
379
|
+
:root {
|
|
380
|
+
/* Color HSLs
|
|
381
|
+
A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
|
|
382
|
+
*/
|
|
383
|
+
|
|
384
|
+
/* Basic Colors */
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* @tokens Basic Colors
|
|
388
|
+
* @presenter Color
|
|
389
|
+
*/
|
|
390
|
+
--op-color-white: hsl(0deg 100% 100%);
|
|
391
|
+
--op-color-black: hsl(0deg 0% 0%);
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* @tokens Primary Colors
|
|
395
|
+
* @presenter Color
|
|
396
|
+
*/
|
|
397
|
+
--op-color-primary-h: 216;
|
|
398
|
+
--op-color-primary-s: 58%;
|
|
399
|
+
--op-color-primary-l: 48%;
|
|
400
|
+
|
|
401
|
+
/**
|
|
402
|
+
* @tokens Neutral Colors
|
|
403
|
+
* @presenter Color
|
|
404
|
+
*/
|
|
405
|
+
--op-color-neutral-h: var(--op-color-primary-h);
|
|
406
|
+
--op-color-neutral-s: 4%;
|
|
407
|
+
--op-color-neutral-l: var(--op-color-primary-l);
|
|
408
|
+
|
|
409
|
+
/**
|
|
410
|
+
* @tokens Alerts Warning Colors
|
|
411
|
+
* @presenter Color
|
|
412
|
+
*/
|
|
413
|
+
--op-color-alerts-warning-h: 47;
|
|
414
|
+
--op-color-alerts-warning-s: 100%;
|
|
415
|
+
--op-color-alerts-warning-l: 61%;
|
|
416
|
+
|
|
417
|
+
/**
|
|
418
|
+
* @tokens Alerts Danger Colors
|
|
419
|
+
* @presenter Color
|
|
420
|
+
*/
|
|
421
|
+
--op-color-alerts-danger-h: 0;
|
|
422
|
+
--op-color-alerts-danger-s: 99%;
|
|
423
|
+
--op-color-alerts-danger-l: 76%;
|
|
424
|
+
|
|
425
|
+
/**
|
|
426
|
+
* @tokens Alerts Info Colors
|
|
427
|
+
* @presenter Color
|
|
428
|
+
*/
|
|
429
|
+
--op-color-alerts-info-h: 216;
|
|
430
|
+
--op-color-alerts-info-s: 58%;
|
|
431
|
+
--op-color-alerts-info-l: 48%;
|
|
432
|
+
|
|
433
|
+
/**
|
|
434
|
+
* @tokens Alerts Notice Colors
|
|
435
|
+
* @presenter Color
|
|
436
|
+
*/
|
|
437
|
+
--op-color-alerts-notice-h: 130;
|
|
438
|
+
--op-color-alerts-notice-s: 61%;
|
|
439
|
+
--op-color-alerts-notice-l: 64%;
|
|
440
|
+
|
|
441
|
+
/* Shadows */
|
|
442
|
+
|
|
443
|
+
/**
|
|
444
|
+
* @tokens Shadows
|
|
445
|
+
* @presenter Shadow
|
|
446
|
+
*/
|
|
447
|
+
--op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
|
|
448
|
+
--op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
|
|
449
|
+
--op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
|
|
450
|
+
--op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
|
|
451
|
+
--op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
|
|
452
|
+
}
|
|
452
453
|
:root {
|
|
453
454
|
/* Enable light and dark mode switching */
|
|
454
455
|
color-scheme: light dark;
|
|
@@ -5214,28 +5215,37 @@ dialog.modal {
|
|
|
5214
5215
|
}
|
|
5215
5216
|
|
|
5216
5217
|
/* Layout Modifiers */
|
|
5218
|
+
/* The *-layout names are kept for backwards compatibility */
|
|
5219
|
+
&.table--layout-auto,
|
|
5217
5220
|
&.table--auto-layout {
|
|
5218
5221
|
table-layout: auto;
|
|
5219
5222
|
}
|
|
5220
5223
|
|
|
5224
|
+
&.table--layout-fixed,
|
|
5221
5225
|
&.table--fixed-layout {
|
|
5222
5226
|
table-layout: fixed;
|
|
5223
5227
|
}
|
|
5224
5228
|
|
|
5225
5229
|
/* Table Density Modifiers */
|
|
5230
|
+
/* The *-density names are kept for backwards compatibility */
|
|
5231
|
+
&.table--density-default,
|
|
5226
5232
|
&.table--default-density {
|
|
5227
5233
|
--__op-table-cell-height: var(--_op-table-cell-height-default);
|
|
5228
5234
|
}
|
|
5229
5235
|
|
|
5236
|
+
&.table--density-comfortable,
|
|
5230
5237
|
&.table--comfortable-density {
|
|
5231
5238
|
--__op-table-cell-height: var(--_op-table-cell-height-comfortable);
|
|
5232
5239
|
}
|
|
5233
5240
|
|
|
5241
|
+
&.table--density-compact,
|
|
5234
5242
|
&.table--compact-density {
|
|
5235
5243
|
--__op-table-cell-height: var(--_op-table-cell-height-compact);
|
|
5236
5244
|
}
|
|
5237
5245
|
|
|
5238
5246
|
/* Striped Modifiers */
|
|
5247
|
+
/* The *-striped names are kept for backwards compatibility */
|
|
5248
|
+
&.table--striped-even,
|
|
5239
5249
|
&.table--even-striped {
|
|
5240
5250
|
tbody tr:nth-child(even) {
|
|
5241
5251
|
background-color: var(--op-color-neutral-plus-seven);
|
|
@@ -5243,6 +5253,7 @@ dialog.modal {
|
|
|
5243
5253
|
}
|
|
5244
5254
|
}
|
|
5245
5255
|
|
|
5256
|
+
&.table--striped-odd,
|
|
5246
5257
|
&.table--odd-striped {
|
|
5247
5258
|
tbody tr:nth-child(odd) {
|
|
5248
5259
|
background-color: var(--op-color-neutral-plus-seven);
|