@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+no_icons.css CHANGED
@@ -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;