@rolemodel/optics 1.12.0 → 2.0.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.
Files changed (52) hide show
  1. package/.github/workflows/linting.yml +0 -2
  2. package/.stylelintrc.json +9 -9
  3. package/.yarn/install-state.gz +0 -0
  4. package/NEW_COMPONENT.md +23 -33
  5. package/README.md +9 -11
  6. package/build_token_json.js +1 -6
  7. package/dist/css/addons/panel.css +65 -0
  8. package/dist/{scss/addons/tom-select.scss → css/addons/tom-select.css} +13 -15
  9. package/dist/{scss → css}/components/form.css +1 -1
  10. package/dist/{scss/components/icon.scss → css/components/icon.css} +10 -8
  11. package/dist/{scss → css}/components/sidebar.css +1 -1
  12. package/dist/{scss/core/base.scss → css/core/base.css} +3 -3
  13. package/dist/{scss/core/tokens/base_tokens.scss → css/core/tokens/base_tokens.css} +102 -160
  14. package/dist/{scss/core/tokens/index.scss → css/core/tokens/index.css} +0 -1
  15. package/dist/css/core/tokens/scale_color_tokens.css +1498 -0
  16. package/dist/{scss/core/utilities.scss → css/core/utilities.css} +20 -18
  17. package/dist/css/optics.css +10 -4223
  18. package/dist/css/optics.min.css +4907 -0
  19. package/dist/{scss/recipes/aligned-header.scss → css/recipes/aligned-header.css} +2 -6
  20. package/dist/tokens/tokens.json +14 -566
  21. package/package.json +9 -14
  22. package/postcss.config.js +3 -0
  23. package/dist/css/optics.css.map +0 -1
  24. package/dist/scss/addons/panel.scss +0 -61
  25. package/dist/scss/core/tokens/dark_mode_tokens.scss +0 -479
  26. package/dist/scss/core/tokens/scale_color_tokens.scss +0 -468
  27. package/dist/scss/optics.scss +0 -13
  28. /package/dist/{scss → css}/components/accordion.css +0 -0
  29. /package/dist/{scss → css}/components/alert.css +0 -0
  30. /package/dist/{scss → css}/components/avatar.css +0 -0
  31. /package/dist/{scss → css}/components/badge.css +0 -0
  32. /package/dist/{scss → css}/components/breadcrumbs.css +0 -0
  33. /package/dist/{scss → css}/components/button.css +0 -0
  34. /package/dist/{scss → css}/components/button_group.css +0 -0
  35. /package/dist/{scss → css}/components/card.css +0 -0
  36. /package/dist/{scss → css}/components/confirm-dialog.css +0 -0
  37. /package/dist/{scss → css}/components/divider.css +0 -0
  38. /package/dist/{scss/components/index.scss → css/components/index.css} +0 -0
  39. /package/dist/{scss → css}/components/modal.css +0 -0
  40. /package/dist/{scss → css}/components/navbar.css +0 -0
  41. /package/dist/{scss → css}/components/pagination.css +0 -0
  42. /package/dist/{scss → css}/components/side_panel.css +0 -0
  43. /package/dist/{scss → css}/components/spinner.css +0 -0
  44. /package/dist/{scss → css}/components/switch.css +0 -0
  45. /package/dist/{scss → css}/components/tab.css +0 -0
  46. /package/dist/{scss → css}/components/table.css +0 -0
  47. /package/dist/{scss → css}/components/tag.css +0 -0
  48. /package/dist/{scss → css}/components/text_pair.css +0 -0
  49. /package/dist/{scss → css}/components/tooltip.css +0 -0
  50. /package/dist/{scss/core/layout.scss → css/core/layout.css} +0 -0
  51. /package/dist/{scss → css}/recipes/16six-sidebar.css +0 -0
  52. /package/dist/{scss → css}/recipes/domains-sidebar.css +0 -0
package/dist/scss/core/tokens/scale_color_tokens.scss DELETED
@@ -1,468 +0,0 @@
1
- @mixin primary-semantic-scale {
2
- /**
3
- * @tokens Primary Colors
4
- * @presenter Color
5
- */
6
- --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
7
-
8
- // Main Scale
9
- --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
10
- --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
11
- --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
12
- --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
13
- --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
14
- --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
15
- --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
16
- --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
17
- --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
18
- --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
19
- --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%);
20
- --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
21
- --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
22
- --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
23
- --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
24
- --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
25
- --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
26
- --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
27
- --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
28
-
29
- // On Scale
30
- --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
31
- --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
32
- --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
33
- --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
34
- --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
35
- --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
36
- --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
37
- --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
38
- --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
39
- --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
40
- --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
41
- --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
42
- --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
43
- --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%);
44
- --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
45
- --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%);
46
- --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
47
- --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%);
48
- --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
49
- --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
50
- --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
51
- --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
52
- --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
53
- --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
54
- --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
55
- --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%);
56
- --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
57
- --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
58
- --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
59
- --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
60
- --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
61
- --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
62
- --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
63
- --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
64
- --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
65
- --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
66
- --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
67
- --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
68
- }
69
-
70
- @mixin neutral-semantic-scale {
71
- /**
72
- * @tokens Neutral Colors
73
- * @presenter Color
74
- */
75
- --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
76
-
77
- // Main Scale
78
- --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
79
- --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
80
- --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
81
- --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
82
- --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
83
- --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
84
- --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%);
85
- --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
86
- --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
87
- --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
88
- --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
89
- --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
90
- --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
91
- --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
92
- --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
93
- --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
94
- --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
95
- --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
96
- --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
97
-
98
- // On Scale
99
- --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
100
- --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
101
- --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
102
- --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%);
103
- --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
104
- --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
105
- --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
106
- --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
107
- --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
108
- --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
109
- --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
110
- --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
111
- --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
112
- --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
113
- --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
114
- --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%);
115
- --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
116
- --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
117
- --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
118
- --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
119
- --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
120
- --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
121
- --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
122
- --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
123
- --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
124
- --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%);
125
- --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
126
- --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
127
- --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
128
- --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
129
- --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
130
- --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%);
131
- --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
132
- --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
133
- --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
134
- --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
135
- --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
136
- --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
137
- }
138
-
139
- @mixin alerts-warning-semantic-scale {
140
- /**
141
- * @tokens Alerts Warning Colors
142
- * @presenter Color
143
- */
144
- // prettier-ignore
145
- --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));
146
-
147
- // Main Scale
148
- --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
149
- --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
150
- --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
151
- --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
152
- --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%);
153
- --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
154
- --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
155
- --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
156
- --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
157
- --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
158
- --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
159
- --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
160
- --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%);
161
- --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
162
- --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
163
- --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
164
- --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
165
- --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
166
- --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
167
-
168
- // On Scale
169
- --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
170
- --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
171
- --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
172
-
173
- // prettier-ignore
174
- --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
175
- --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
176
-
177
- // prettier-ignore
178
- --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
179
- --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
180
- --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
181
- --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
182
-
183
- // prettier-ignore
184
- --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%);
185
- --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
186
- --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
187
- --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
188
-
189
- // prettier-ignore
190
- --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
191
- --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
192
- --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
193
- --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
194
- --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%);
195
- --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
196
- --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
197
- --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
198
-
199
- // prettier-ignore
200
- --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
201
- --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
202
-
203
- // prettier-ignore
204
- --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
205
- --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
206
-
207
- // prettier-ignore
208
- --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
209
- --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
210
-
211
- // prettier-ignore
212
- --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
213
- --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
214
-
215
- // prettier-ignore
216
- --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
217
- --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
218
-
219
- // prettier-ignore
220
- --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%);
221
- --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
222
-
223
- // prettier-ignore
224
- --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
225
- --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
226
-
227
- // prettier-ignore
228
- --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%);
229
- --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
230
-
231
- // prettier-ignore
232
- --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
233
- }
234
-
235
- @mixin alerts-danger-semantic-scale {
236
- /**
237
- * @tokens Alerts Danger Colors
238
- * @presenter Color
239
- */
240
- // prettier-ignore
241
- --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));
242
-
243
- // Main Scale
244
- --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
245
- --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
246
- --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
247
- --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
248
- --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
249
- --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
250
- --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
251
- --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
252
- --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%);
253
- --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
254
- --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
255
- --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
256
- --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
257
- --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
258
- --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
259
- --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
260
- --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
261
- --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
262
- --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
263
-
264
- // On Scale
265
- --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
266
- --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
267
- --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
268
- --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
269
- --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
270
- --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
271
- --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
272
- --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
273
- --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
274
- --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%);
275
- --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
276
- --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
277
- --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
278
- --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
279
- --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
280
- --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
281
- --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
282
- --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%);
283
- --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
284
- --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
285
- --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
286
- --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
287
- --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
288
- --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%);
289
- --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%);
290
- --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%);
291
- --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
292
- --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%);
293
- --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
294
- --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%);
295
- --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
296
- --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%);
297
- --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
298
- --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
299
- --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
300
- --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%);
301
- --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
302
- --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
303
- }
304
-
305
- @mixin alerts-info-semantic-scale {
306
- /**
307
- * @tokens Alerts Info Colors
308
- * @presenter Color
309
- */
310
- // prettier-ignore
311
- --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
312
-
313
- // Main Scale
314
- --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
315
- --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
316
- --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
317
- --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
318
- --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
319
- --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
320
- --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
321
- --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
322
- --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%);
323
- --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
324
- --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
325
- --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
326
- --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
327
- --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
328
- --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
329
- --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
330
- --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
331
- --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
332
- --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
333
-
334
- // On Scale
335
- --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
336
- --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
337
- --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
338
- --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
339
- --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
340
- --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
341
- --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
342
- --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
343
- --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
344
- --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
345
- --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
346
- --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
347
- --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
348
- --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%);
349
- --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
350
- --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%);
351
- --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
352
- --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%);
353
- --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
354
- --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
355
- --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
356
- --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
357
- --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
358
- --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
359
- --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
360
- --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
361
- --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
362
- --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
363
- --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
364
- --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
365
- --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
366
- --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
367
- --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
368
- --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
369
- --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
370
- --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
371
- --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
372
- --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
373
- }
374
-
375
- @mixin alerts-notice-semantic-scale {
376
- /**
377
- * @tokens Alerts Notice Colors
378
- * @presenter Color
379
- */
380
- // prettier-ignore
381
- --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
382
-
383
- // Main Scale
384
- --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
385
- --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
386
- --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
387
- --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
388
- --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
389
- --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
390
- --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%);
391
- --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
392
- --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%);
393
- --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
394
- --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
395
- --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
396
- --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
397
- --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%);
398
- --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
399
- --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
400
- --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
401
- --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
402
- --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
403
-
404
- // On Scale
405
- --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
406
- --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
407
- --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
408
- --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
409
- --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
410
- --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
411
- --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
412
- --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
413
- --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
414
- --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%);
415
- --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
416
- --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
417
- --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
418
- --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
419
- --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
420
- --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
421
- --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
422
- --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%);
423
- --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
424
- --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
425
- --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
426
- --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
427
- --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
428
- --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%);
429
- --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
430
- --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%);
431
- --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
432
- --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%);
433
- --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
434
- --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%);
435
- --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
436
- --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
437
- --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
438
- --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
439
- --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
440
- --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%);
441
- --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
442
- --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
443
- }
444
-
445
- @mixin background {
446
- /**
447
- * @tokens Basic Colors
448
- * @presenter Color
449
- */
450
- --op-color-background: var(--op-color-neutral-plus-eight);
451
- --op-color-on-background: var(--op-color-neutral-on-plus-eight);
452
- --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
453
- }
454
-
455
- :root {
456
- // Semantic Scales: plus adds luminosity, minus removes luminosity
457
- // This borrows from the photography concept of Aperture f-stops.
458
- // https://www.adobe.com/creativecloud/photography/discover/f-stop.html
459
- @include primary-semantic-scale;
460
- @include neutral-semantic-scale;
461
-
462
- @include alerts-warning-semantic-scale;
463
- @include alerts-danger-semantic-scale;
464
- @include alerts-info-semantic-scale;
465
- @include alerts-notice-semantic-scale;
466
-
467
- @include background;
468
- }
package/dist/scss/optics.scss DELETED
@@ -1,13 +0,0 @@
1
- // Third party Vendors
2
- @import 'modern-css-reset/dist/reset';
3
-
4
- // Tokens
5
- @import 'core/tokens';
6
-
7
- // Base styles and utilities
8
- @import 'core/base';
9
- @import 'core/layout';
10
- @import 'core/utilities';
11
-
12
- // Components
13
- @import 'components';
/package/dist/{scss → css}/components/accordion.css RENAMED
File without changes
/package/dist/{scss → css}/components/alert.css RENAMED
File without changes
/package/dist/{scss → css}/components/avatar.css RENAMED
File without changes
/package/dist/{scss → css}/components/badge.css RENAMED
File without changes
/package/dist/{scss → css}/components/breadcrumbs.css RENAMED
File without changes
/package/dist/{scss → css}/components/button.css RENAMED
File without changes
/package/dist/{scss → css}/components/button_group.css RENAMED
File without changes
/package/dist/{scss → css}/components/card.css RENAMED
File without changes
/package/dist/{scss → css}/components/divider.css RENAMED
File without changes
/package/dist/{scss → css}/components/modal.css RENAMED
File without changes
/package/dist/{scss → css}/components/navbar.css RENAMED
File without changes
/package/dist/{scss → css}/components/pagination.css RENAMED
File without changes
/package/dist/{scss → css}/components/side_panel.css RENAMED
File without changes
/package/dist/{scss → css}/components/spinner.css RENAMED
File without changes
/package/dist/{scss → css}/components/switch.css RENAMED
File without changes
/package/dist/{scss → css}/components/tab.css RENAMED
File without changes
/package/dist/{scss → css}/components/table.css RENAMED
File without changes
/package/dist/{scss → css}/components/tag.css RENAMED
File without changes
/package/dist/{scss → css}/components/text_pair.css RENAMED
File without changes
/package/dist/{scss → css}/components/tooltip.css RENAMED
File without changes
/package/dist/{scss → css}/recipes/16six-sidebar.css RENAMED
File without changes
/package/dist/{scss → css}/recipes/domains-sidebar.css RENAMED
File without changes