@rolemodel/optics 2.5.1 → 2.6.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 (65) hide show
  1. package/.github/workflows/linting.yml +2 -0
  2. package/.prettierignore +3 -0
  3. package/.yarn/install-state.gz +0 -0
  4. package/CHANGELOG.md +41 -0
  5. package/README.md +16 -0
  6. package/build_token_json.js +2 -1
  7. package/dist/README.md +16 -0
  8. package/dist/css/core/tokens/base_color_tokens.css +74 -0
  9. package/dist/css/core/tokens/base_tokens.css +3 -345
  10. package/dist/css/core/tokens/index.css +2 -1
  11. package/dist/css/core/tokens/oklch/base_color_tokens.css +74 -0
  12. package/dist/css/core/tokens/oklch/index.css +3 -0
  13. package/dist/css/core/tokens/oklch/scale_color_tokens.css +1498 -0
  14. package/dist/css/core/tokens/shared_tokens.css +272 -0
  15. package/dist/css/optics+feather_icons.css +74 -73
  16. package/dist/css/optics+feather_icons.min.css +1 -1
  17. package/dist/css/optics+lucide_icons.css +74 -73
  18. package/dist/css/optics+lucide_icons.min.css +1 -1
  19. package/dist/css/optics+material_outlined_variable.css +74 -73
  20. package/dist/css/optics+material_outlined_variable.min.css +1 -1
  21. package/dist/css/optics+no_icons.css +74 -73
  22. package/dist/css/optics+no_icons.min.css +1 -1
  23. package/dist/css/optics+phosphor_icons.css +74 -73
  24. package/dist/css/optics+phosphor_icons.min.css +1 -1
  25. package/dist/css/optics+tabler_icons.css +74 -73
  26. package/dist/css/optics+tabler_icons.min.css +1 -1
  27. package/dist/css/optics-oklch+feather_icons.css +6566 -0
  28. package/dist/css/optics-oklch+feather_icons.min.css +1 -0
  29. package/dist/css/optics-oklch+lucide_icons.css +13598 -0
  30. package/dist/css/optics-oklch+lucide_icons.min.css +1 -0
  31. package/dist/css/optics-oklch+material_outlined_variable.css +5636 -0
  32. package/dist/css/optics-oklch+material_outlined_variable.min.css +1 -0
  33. package/dist/css/optics-oklch+no_icons.css +5627 -0
  34. package/dist/css/optics-oklch+no_icons.min.css +1 -0
  35. package/dist/css/optics-oklch+phosphor_icons.css +5671 -0
  36. package/dist/css/optics-oklch+phosphor_icons.min.css +1 -0
  37. package/dist/css/optics-oklch+tabler_icons.css +5638 -0
  38. package/dist/css/optics-oklch+tabler_icons.min.css +1 -0
  39. package/dist/css/optics-oklch.css +5640 -0
  40. package/dist/css/optics-oklch.min.css +1 -0
  41. package/dist/css/optics.css +74 -73
  42. package/dist/css/optics.min.css +1 -1
  43. package/dist/package.json +10 -6
  44. package/dist/tokens/tokens.json +16 -16
  45. package/dist/tools/check-contrast.cjs +47 -0
  46. package/dist/tools/contrast/builds/build.cjs +44 -0
  47. package/dist/tools/contrast/builds/hsl-build.cjs +11 -0
  48. package/dist/tools/contrast/builds/oklch-build.cjs +11 -0
  49. package/dist/tools/contrast/calc-expression.cjs +68 -0
  50. package/dist/tools/contrast/check-error.cjs +4 -0
  51. package/dist/tools/contrast/color-pair.cjs +35 -0
  52. package/dist/tools/contrast/colors/color.cjs +41 -0
  53. package/dist/tools/contrast/colors/function-color.cjs +46 -0
  54. package/dist/tools/contrast/colors/hex-color.cjs +19 -0
  55. package/dist/tools/contrast/colors/hsl-color.cjs +25 -0
  56. package/dist/tools/contrast/colors/oklch-color.cjs +36 -0
  57. package/dist/tools/contrast/colors/themed-color.cjs +37 -0
  58. package/dist/tools/contrast/contrast-check.cjs +37 -0
  59. package/dist/tools/contrast/contrast-reporter.cjs +44 -0
  60. package/dist/tools/contrast/contrast-result.cjs +15 -0
  61. package/dist/tools/contrast/css-syntax.cjs +23 -0
  62. package/dist/tools/contrast/stylesheet.cjs +174 -0
  63. package/dist/tools/contrast/theme.cjs +84 -0
  64. package/dist/tools/contrast/tool-options.cjs +50 -0
  65. package/package.json +10 -6
package/dist/css/optics+phosphor_icons.css CHANGED
@@ -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;