@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+material_outlined_variable.css CHANGED
@@ -103,67 +103,6 @@ Noto Sans supports:
103
103
 
104
104
  /* Tokens */
105
105
  :root {
106
- /* Color HSLs
107
- A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
108
- */
109
-
110
- /* Basic Colors */
111
-
112
- /**
113
- * @tokens Basic Colors
114
- * @presenter Color
115
- */
116
- --op-color-white: hsl(0deg 100% 100%);
117
- --op-color-black: hsl(0deg 0% 0%);
118
-
119
- /**
120
- * @tokens Primary Colors
121
- * @presenter Color
122
- */
123
- --op-color-primary-h: 216;
124
- --op-color-primary-s: 58%;
125
- --op-color-primary-l: 48%;
126
-
127
- /**
128
- * @tokens Neutral Colors
129
- * @presenter Color
130
- */
131
- --op-color-neutral-h: var(--op-color-primary-h);
132
- --op-color-neutral-s: 4%;
133
- --op-color-neutral-l: var(--op-color-primary-l);
134
-
135
- /**
136
- * @tokens Alerts Warning Colors
137
- * @presenter Color
138
- */
139
- --op-color-alerts-warning-h: 47;
140
- --op-color-alerts-warning-s: 100%;
141
- --op-color-alerts-warning-l: 61%;
142
-
143
- /**
144
- * @tokens Alerts Danger Colors
145
- * @presenter Color
146
- */
147
- --op-color-alerts-danger-h: 0;
148
- --op-color-alerts-danger-s: 99%;
149
- --op-color-alerts-danger-l: 76%;
150
-
151
- /**
152
- * @tokens Alerts Info Colors
153
- * @presenter Color
154
- */
155
- --op-color-alerts-info-h: 216;
156
- --op-color-alerts-info-s: 58%;
157
- --op-color-alerts-info-l: 48%;
158
-
159
- /**
160
- * @tokens Alerts Notice Colors
161
- * @presenter Color
162
- */
163
- --op-color-alerts-notice-h: 130;
164
- --op-color-alerts-notice-s: 61%;
165
- --op-color-alerts-notice-l: 64%;
166
-
167
106
  /**
168
107
  * @tokens Opacities
169
108
  * @presenter Opacity
@@ -353,18 +292,6 @@ Noto Sans supports:
353
292
  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
354
293
  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
355
294
 
356
- /* Shadows */
357
-
358
- /**
359
- * @tokens Shadows
360
- * @presenter Shadow
361
- */
362
- --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
363
- --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
364
- --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
365
- --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
366
- --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
367
-
368
295
  /* Z Index */
369
296
 
370
297
  /**
@@ -447,6 +374,80 @@ Noto Sans supports:
447
374
  inset-inline-end: -100%;
448
375
  }
449
376
  }
377
+ :root {
378
+ /* Color HSLs
379
+ A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
380
+ */
381
+
382
+ /* Basic Colors */
383
+
384
+ /**
385
+ * @tokens Basic Colors
386
+ * @presenter Color
387
+ */
388
+ --op-color-white: hsl(0deg 100% 100%);
389
+ --op-color-black: hsl(0deg 0% 0%);
390
+
391
+ /**
392
+ * @tokens Primary Colors
393
+ * @presenter Color
394
+ */
395
+ --op-color-primary-h: 216;
396
+ --op-color-primary-s: 58%;
397
+ --op-color-primary-l: 48%;
398
+
399
+ /**
400
+ * @tokens Neutral Colors
401
+ * @presenter Color
402
+ */
403
+ --op-color-neutral-h: var(--op-color-primary-h);
404
+ --op-color-neutral-s: 4%;
405
+ --op-color-neutral-l: var(--op-color-primary-l);
406
+
407
+ /**
408
+ * @tokens Alerts Warning Colors
409
+ * @presenter Color
410
+ */
411
+ --op-color-alerts-warning-h: 47;
412
+ --op-color-alerts-warning-s: 100%;
413
+ --op-color-alerts-warning-l: 61%;
414
+
415
+ /**
416
+ * @tokens Alerts Danger Colors
417
+ * @presenter Color
418
+ */
419
+ --op-color-alerts-danger-h: 0;
420
+ --op-color-alerts-danger-s: 99%;
421
+ --op-color-alerts-danger-l: 76%;
422
+
423
+ /**
424
+ * @tokens Alerts Info Colors
425
+ * @presenter Color
426
+ */
427
+ --op-color-alerts-info-h: 216;
428
+ --op-color-alerts-info-s: 58%;
429
+ --op-color-alerts-info-l: 48%;
430
+
431
+ /**
432
+ * @tokens Alerts Notice Colors
433
+ * @presenter Color
434
+ */
435
+ --op-color-alerts-notice-h: 130;
436
+ --op-color-alerts-notice-s: 61%;
437
+ --op-color-alerts-notice-l: 64%;
438
+
439
+ /* Shadows */
440
+
441
+ /**
442
+ * @tokens Shadows
443
+ * @presenter Shadow
444
+ */
445
+ --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
446
+ --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
447
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
448
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
449
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
450
+ }
450
451
  :root {
451
452
  /* Enable light and dark mode switching */
452
453
  color-scheme: light dark;