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