@rolemodel/optics 1.11.0 → 1.13.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 (25) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/dist/css/optics.css +1632 -1283
  3. package/dist/css/optics.css.map +1 -1
  4. package/dist/scss/addons/panel.css +65 -0
  5. package/dist/scss/addons/{tom-select.scss → tom-select.css} +13 -15
  6. package/dist/scss/components/{icon.scss → icon.css} +10 -8
  7. package/dist/scss/components/sidebar.css +139 -0
  8. package/dist/scss/core/{base.scss → base.css} +3 -3
  9. package/dist/scss/core/tokens/{base_tokens.scss → base_tokens.css} +102 -160
  10. package/dist/scss/core/tokens/index.scss +0 -1
  11. package/dist/scss/core/tokens/scale_color_tokens.css +1498 -0
  12. package/dist/scss/core/{utilities.scss → utilities.css} +20 -18
  13. package/dist/scss/recipes/16six-sidebar.css +63 -0
  14. package/dist/scss/recipes/{aligned-header.scss → aligned-header.css} +2 -6
  15. package/dist/scss/recipes/domains-sidebar.css +40 -0
  16. package/dist/tokens/tokens.json +14 -566
  17. package/package.json +1 -1
  18. package/public/design-tokens.source.json +1 -0
  19. package/dist/scss/addons/panel.scss +0 -61
  20. package/dist/scss/components/sidebar.scss +0 -184
  21. package/dist/scss/core/tokens/dark_mode_tokens.scss +0 -479
  22. package/dist/scss/core/tokens/scale_color_tokens.scss +0 -468
  23. package/dist/scss/recipes/16six-sidebar.scss +0 -68
  24. package/dist/scss/recipes/domains-sidebar.scss +0 -40
  25. /package/dist/scss/core/{layout.scss → layout.css} +0 -0
package/dist/scss/core/tokens/dark_mode_tokens.scss DELETED
@@ -1,479 +0,0 @@
1
- @mixin primary-semantic-scale-dark {
2
- /**
3
- * @tokens Primary Dark Colors
4
- * @presenter Color
5
- */
6
-
7
- // Main Scale
8
- --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
9
- --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
10
- --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
11
- --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
12
- --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
13
- --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
14
- --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
15
- --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
16
- --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
17
- --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
18
- --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
19
- --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
20
- --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
21
- --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
22
- --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
23
- --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
24
- --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
25
- --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
26
- --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
27
-
28
- // On Scale
29
- --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
30
- --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
31
- --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
32
- --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
33
- --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
34
- --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
35
- --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
36
- --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
37
- --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
38
- --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
39
- --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
40
- --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
41
- --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
42
- --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
43
- --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
44
- --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
45
- --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
46
- --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
47
- --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
48
- --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
49
- --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
50
- --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
51
- --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
52
- --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
53
- --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
54
- --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
55
- --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
56
- --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
57
- --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
58
- --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
59
- --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
60
- --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
61
- --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
62
- --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
63
- --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
64
- --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
65
- --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
66
- --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
67
- }
68
-
69
- @mixin neutral-semantic-scale-dark {
70
- /**
71
- * @tokens Neutral Dark Colors
72
- * @presenter Color
73
- */
74
-
75
- // Main Scale
76
- --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
77
- --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
78
- --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
79
- --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
80
- --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
81
- --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
82
- --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
83
- --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
84
- --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
85
- --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
86
- --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
87
- --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
88
- --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
89
- --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
90
- --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
91
- --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
92
- --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
93
- --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
94
- --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
95
-
96
- // On Scale
97
- --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
98
- --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
99
- --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
100
- --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
101
- --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
102
- --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
103
- --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
104
- --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
105
- --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
106
- --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
107
- --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
108
- --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
109
- --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
110
- --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
111
- --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
112
- --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
113
- --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
114
- --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
115
- --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
116
- --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
117
- --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
118
- --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
119
- --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
120
- --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
121
- --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
122
- --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
123
- --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
124
- --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
125
- --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
126
- --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
127
- --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
128
- --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
129
- --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
130
- --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
131
- --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
132
- --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
133
- --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
134
- --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
135
- }
136
-
137
- @mixin alerts-warning-semantic-scale-dark {
138
- /**
139
- * @tokens Alerts Warning Dark Colors
140
- * @presenter Color
141
- */
142
-
143
- // Main Scale
144
- --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
145
- --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
146
- --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
147
- --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
148
- --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
149
- --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
150
- --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
151
- --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
152
- --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
153
- --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
154
- --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
155
- --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
156
- --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
157
- --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
158
- --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
159
- --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
160
- --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
161
- --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
162
- --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
163
-
164
- // On Scale
165
- --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
166
- --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
167
- --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
168
-
169
- // prettier-ignore
170
- --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
171
- --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
172
-
173
- // prettier-ignore
174
- --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
175
- --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
176
- --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
177
- --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
178
-
179
- // prettier-ignore
180
- --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
181
- --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
182
-
183
- // prettier-ignore
184
- --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
185
- --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
186
-
187
- // prettier-ignore
188
- --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
189
- --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
190
- --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
191
- --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
192
- --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
193
- --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
194
- --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
195
- --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
196
-
197
- // prettier-ignore
198
- --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
199
- --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
200
-
201
- // prettier-ignore
202
- --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
203
- --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
204
-
205
- // prettier-ignore
206
- --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
207
- --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
208
-
209
- // prettier-ignore
210
- --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
211
- --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
212
-
213
- // prettier-ignore
214
- --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
215
- --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
216
-
217
- // prettier-ignore
218
- --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
219
- --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
220
-
221
- // prettier-ignore
222
- --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
223
- --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
224
-
225
- // prettier-ignore
226
- --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
227
- --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
228
-
229
- // prettier-ignore
230
- --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
231
- }
232
-
233
- @mixin alerts-danger-semantic-scale-dark {
234
- /**
235
- * @tokens Alerts Danger Dark Colors
236
- * @presenter Color
237
- */
238
-
239
- // Main Scale
240
- --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
241
- --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
242
- --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
243
- --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
244
- --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
245
- --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
246
- --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
247
- --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
248
- --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
249
- --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
250
- --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
251
- --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
252
- --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
253
- --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
254
- --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
255
- --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
256
- --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
257
- --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
258
- --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
259
-
260
- // On Scale
261
- --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
262
- --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
263
- --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
264
- --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
265
- --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
266
- --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
267
- --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
268
- --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
269
- --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
270
- --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
271
- --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
272
- --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
273
- --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
274
- --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
275
- --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
276
- --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
277
- --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
278
- --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
279
- --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
280
- --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
281
- --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
282
- --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
283
- --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
284
- --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
285
- --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
286
- --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
287
- --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
288
- --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
289
- --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
290
- --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
291
- --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
292
- --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
293
- --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
294
- --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
295
- --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
296
- --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
297
- --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
298
- --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
299
- }
300
-
301
- @mixin alerts-info-semantic-scale-dark {
302
- /**
303
- * @tokens Alerts Info Dark Colors
304
- * @presenter Color
305
- */
306
-
307
- // Main Scale
308
- --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
309
- --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
310
- --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
311
- --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
312
- --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
313
- --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
314
- --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
315
- --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
316
- --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
317
- --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
318
- --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
319
- --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
320
- --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
321
- --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
322
- --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
323
- --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
324
- --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
325
- --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
326
- --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
327
-
328
- // On Scale
329
- --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
330
- --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
331
- --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
332
- --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
333
- --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
334
- --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
335
- --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
336
- --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
337
- --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
338
- --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
339
- --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
340
- --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
341
- --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
342
- --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
343
- --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
344
- --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
345
- --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
346
- --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
347
- --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
348
- --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
349
- --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
350
- --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
351
- --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
352
- --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
353
- --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
354
- --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
355
- --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
356
- --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
357
- --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
358
- --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
359
- --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
360
- --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
361
- --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
362
- --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
363
- --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
364
- --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
365
- --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
366
- --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
367
- }
368
-
369
- @mixin alerts-notice-semantic-scale-dark {
370
- /**
371
- * @tokens Alerts Notice Dark Colors
372
- * @presenter Color
373
- */
374
-
375
- // Main Scale
376
- --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
377
- --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
378
- --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
379
- --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
380
- --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
381
- --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
382
- --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
383
- --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
384
- --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
385
- --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
386
- --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
387
- --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
388
- --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
389
- --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
390
- --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
391
- --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
392
- --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
393
- --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
394
- --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
395
-
396
- // On Scale
397
- --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
398
- --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
399
- --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
400
- --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
401
- --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
402
- --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
403
- --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
404
- --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
405
- --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
406
- --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
407
- --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
408
- --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
409
- --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
410
- --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
411
- --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
412
- --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
413
- --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
414
- --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
415
- --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
416
- --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
417
- --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
418
- --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
419
- --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
420
- --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
421
- --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
422
- --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
423
- --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
424
- --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
425
- --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
426
- --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
427
- --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
428
- --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
429
- --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
430
- --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
431
- --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
432
- --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
433
- --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
434
- --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
435
- }
436
-
437
- @mixin shadows-dark {
438
- /**
439
- * @tokens Dark Shadows
440
- * @presenter Shadow
441
- */
442
- --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
443
- --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
444
- --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
445
- --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
446
- --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
447
- }
448
-
449
- @mixin encoded-images {
450
- /**
451
- * @tokens Encoded Images
452
- */
453
- --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
454
- }
455
-
456
- @mixin all-tokens-dark {
457
- @include primary-semantic-scale-dark;
458
- @include neutral-semantic-scale-dark;
459
-
460
- @include alerts-warning-semantic-scale-dark;
461
- @include alerts-danger-semantic-scale-dark;
462
- @include alerts-info-semantic-scale-dark;
463
- @include alerts-notice-semantic-scale-dark;
464
-
465
- @include shadows-dark;
466
- @include encoded-images;
467
- }
468
-
469
- // Follow system preference unless forced to light
470
- @media (prefers-color-scheme: dark) {
471
- :root:not([data-theme-mode='light']) {
472
- @include all-tokens-dark;
473
- }
474
- }
475
-
476
- // Force design system to dark
477
- :root[data-theme-mode='dark'] {
478
- @include all-tokens-dark;
479
- }