@rolemodel/optics 0.2.4 → 0.3.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.
@@ -74,115 +74,213 @@ select {
74
74
  scroll-behavior: auto !important;
75
75
  }
76
76
  }
77
+ /**
78
+ * @tokens Breakpoints
79
+ */
77
80
  :root {
78
- --rm-color-white: hsl(0deg 100% 100%);
79
- --rm-color-black: hsl(0deg 0% 0%);
80
- --rm-color-primary-h: 216;
81
- --rm-color-primary-s: 58%;
82
- --rm-color-primary-l: 48%;
83
- --rm-color-neutral-h: var(--rm-color-primary-h);
84
- --rm-color-neutral-s: 4%;
85
- --rm-color-neutral-l: var(--rm-color-primary-l);
86
- --rm-color-alerts-warning-h: 47;
87
- --rm-color-alerts-warning-s: 100%;
88
- --rm-color-alerts-warning-l: 61%;
89
- --rm-color-alerts-danger-h: 0;
90
- --rm-color-alerts-danger-s: 99%;
91
- --rm-color-alerts-danger-l: 76%;
92
- --rm-color-alerts-info-h: 216;
93
- --rm-color-alerts-info-s: 58%;
94
- --rm-color-alerts-info-l: 48%;
95
- --rm-color-alerts-notice-h: 130;
96
- --rm-color-alerts-notice-s: 61%;
97
- --rm-color-alerts-notice-l: 64%;
98
- --rm-radius-small: 2px;
99
- --rm-radius-medium: 4px;
100
- --rm-radius-large: 8px;
101
- --rm-radius-x-large: 16px;
102
- --rm-radius-circle: 50%;
103
- --rm-radius-pill: 9999px;
104
- --rm-border-width: 1px;
105
- --rm-border-width-large: 2px;
106
- --rm-border-width-x-large: 4px;
107
- --rm-border-color: var(--rm-color-neutral-plus-three);
108
- --rm-border-none: 0 0 0 0;
109
- --rm-border-all: 0 0 0 var(--rm-border-width);
110
- --rm-border-top: 0 calc(-1 * var(--rm-border-width)) 0 0;
111
- --rm-border-right: var(--rm-border-width) 0 0 0;
112
- --rm-border-bottom: 0 var(--rm-border-width) 0 0;
113
- --rm-border-left: calc(-1 * var(--rm-border-width)) 0 0 0;
114
- --rm-border-y: var(--rm-border-top) var(--rm-border-color), var(--rm-border-bottom) var(--rm-border-color);
115
- --rm-border-x: var(--rm-border-left) var(--rm-border-color), var(--rm-border-right) var(--rm-border-color);
116
- --rm-font-scale-unit: 1rem;
117
- --rm-font-x-small: calc(var(--rm-font-scale-unit) * 1.2);
118
- --rm-font-small: calc(var(--rm-font-scale-unit) * 1.4);
119
- --rm-font-medium: calc(var(--rm-font-scale-unit) * 1.6);
120
- --rm-font-large: calc(var(--rm-font-scale-unit) * 1.8);
121
- --rm-font-x-large: calc(var(--rm-font-scale-unit) * 2.4);
122
- --rm-font-2x-large: calc(var(--rm-font-scale-unit) * 2.8);
123
- --rm-font-3x-large: calc(var(--rm-font-scale-unit) * 3.2);
124
- --rm-font-4x-large: calc(var(--rm-font-scale-unit) * 3.6);
125
- --rm-font-5x-large: calc(var(--rm-font-scale-unit) * 4.8);
126
- --rm-font-weight-thin: 100;
127
- --rm-font-weight-extra-light: 200;
128
- --rm-font-weight-light: 300;
129
- --rm-font-weight-normal: 400;
130
- --rm-font-weight-medium: 500;
131
- --rm-font-weight-semi-bold: 600;
132
- --rm-font-weight-bold: 700;
133
- --rm-font-weight-extra-bold: 800;
134
- --rm-font-weight-black: 900;
135
- --rm-font-family: "Noto Sans", "Noto Serif", sans-serif;
136
- --rm-line-height-none: 0;
137
- --rm-line-height-densest: 1;
138
- --rm-line-height-denser: 1.15;
139
- --rm-line-height-dense: 1.3;
140
- --rm-line-height-base: 1.5;
141
- --rm-line-height-loose: 1.6;
142
- --rm-line-height-looser: 1.7;
143
- --rm-line-height-loosest: 1.8;
144
- --rm-letter-spacing-navigation: 0.01rem;
145
- --rm-letter-spacing-label: 0.04rem;
146
- --rm-transition-input: 120ms;
147
- --rm-transition-navigation: 200ms;
148
- --rm-transition-sidebar: 300ms;
149
- --rm-transition-modal: 300ms;
150
- --rm-transition-panel: 400ms;
151
- --rm-transition-flash: 5s;
152
- --rm-form-dropdown-arrow-width: 1rem;
153
- --rm-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
154
- --rm-space-scale-unit: 1rem;
155
- --rm-space-3x-small: calc(var(--rm-space-scale-unit) * 0.2);
156
- --rm-space-2x-small: calc(var(--rm-space-scale-unit) * 0.4);
157
- --rm-space-x-small: calc(var(--rm-space-scale-unit) * 0.8);
158
- --rm-space-small: calc(var(--rm-space-scale-unit) * 1.2);
159
- --rm-space-medium: calc(var(--rm-space-scale-unit) * 1.6);
160
- --rm-space-large: calc(var(--rm-space-scale-unit) * 2);
161
- --rm-space-x-large: calc(var(--rm-space-scale-unit) * 2.4);
162
- --rm-space-2x-large: calc(var(--rm-space-scale-unit) * 2.8);
163
- --rm-space-3x-large: calc(var(--rm-space-scale-unit) * 4);
164
- --rm-space-4x-large: calc(var(--rm-space-scale-unit) * 8);
165
- --rm-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
166
- --rm-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
167
- --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
168
- --rm-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
169
- --rm-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
170
- --rm-z-index-header: 500;
171
- --rm-z-index-footer: 500;
172
- --rm-z-index-drawer: 700;
173
- --rm-z-index-dialog: 800;
174
- --rm-z-index-dialog-backdrop: 801;
175
- --rm-z-index-dialog-content: 802;
176
- --rm-z-index-dropdown: 900;
177
- --rm-z-index-alert-group: 950;
178
- --rm-z-index-tooltip: 1000;
179
- --rm-input-height-small: 2.4rem;
180
- --rm-input-height-medium: 3.2rem;
181
- --rm-input-height-large: 4.4rem;
182
- --rm-input-height-x-large: 5.6rem;
183
- --rm-input-outer-focus: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four);
184
- --rm-input-inner-focus: inset var(--rm-border-all) var(--rm-color-primary-minus-three);
185
- --rm-input-focus: var(--rm-input-inner-focus), var(--rm-input-outer-focus);
81
+ /**
82
+ * @tokens Basic Colors
83
+ * @presenter Color
84
+ */
85
+ --op-color-white: hsl(0deg 100% 100%);
86
+ --op-color-black: hsl(0deg 0% 0%);
87
+ /**
88
+ * @tokens Primary Colors
89
+ * @presenter Color
90
+ */
91
+ --op-color-primary-h: 216;
92
+ --op-color-primary-s: 58%;
93
+ --op-color-primary-l: 48%;
94
+ /**
95
+ * @tokens Neutral Colors
96
+ * @presenter Color
97
+ */
98
+ --op-color-neutral-h: var(--op-color-primary-h);
99
+ --op-color-neutral-s: 4%;
100
+ --op-color-neutral-l: var(--op-color-primary-l);
101
+ /**
102
+ * @tokens Alerts Warning Colors
103
+ * @presenter Color
104
+ */
105
+ --op-color-alerts-warning-h: 47;
106
+ --op-color-alerts-warning-s: 100%;
107
+ --op-color-alerts-warning-l: 61%;
108
+ /**
109
+ * @tokens Alerts Danger Colors
110
+ * @presenter Color
111
+ */
112
+ --op-color-alerts-danger-h: 0;
113
+ --op-color-alerts-danger-s: 99%;
114
+ --op-color-alerts-danger-l: 76%;
115
+ /**
116
+ * @tokens Alerts Info Colors
117
+ * @presenter Color
118
+ */
119
+ --op-color-alerts-info-h: 216;
120
+ --op-color-alerts-info-s: 58%;
121
+ --op-color-alerts-info-l: 48%;
122
+ /**
123
+ * @tokens Alerts Notice Colors
124
+ * @presenter Color
125
+ */
126
+ --op-color-alerts-notice-h: 130;
127
+ --op-color-alerts-notice-s: 61%;
128
+ --op-color-alerts-notice-l: 64%;
129
+ /**
130
+ * @tokens Border Radius
131
+ * @presenter BorderRadius
132
+ */
133
+ --op-radius-small: 2px;
134
+ --op-radius-medium: 4px;
135
+ --op-radius-large: 8px;
136
+ --op-radius-x-large: 12px;
137
+ --op-radius-2x-large: 16px;
138
+ --op-radius-circle: 50%;
139
+ --op-radius-pill: 9999px;
140
+ /**
141
+ * @tokens Border Width
142
+ * @presenter Spacing
143
+ */
144
+ --op-border-width: 1px;
145
+ --op-border-width-large: 2px;
146
+ --op-border-width-x-large: 4px;
147
+ /**
148
+ * @tokens Border Color
149
+ * @presenter Color
150
+ */
151
+ --op-border-color: var(--op-color-neutral-plus-five);
152
+ /**
153
+ * @tokens Border Shadow
154
+ * @presenter Shadow
155
+ */
156
+ --op-border-none: 0 0 0 0;
157
+ --op-border-all: 0 0 0 var(--op-border-width);
158
+ --op-border-top: 0 calc(-1 * var(--op-border-width)) 0 0;
159
+ --op-border-right: var(--op-border-width) 0 0 0;
160
+ --op-border-bottom: 0 var(--op-border-width) 0 0;
161
+ --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
162
+ --op-border-y: var(--op-border-top) var(--op-border-color), var(--op-border-bottom) var(--op-border-color);
163
+ --op-border-x: var(--op-border-left) var(--op-border-color), var(--op-border-right) var(--op-border-color);
164
+ /**
165
+ * @tokens Font Scale
166
+ * @presenter FontSize
167
+ */
168
+ --op-font-scale-unit: 1rem;
169
+ --op-font-2x-small: calc(var(--op-font-scale-unit) * 1);
170
+ --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2);
171
+ --op-font-small: calc(var(--op-font-scale-unit) * 1.4);
172
+ --op-font-medium: calc(var(--op-font-scale-unit) * 1.6);
173
+ --op-font-large: calc(var(--op-font-scale-unit) * 1.8);
174
+ --op-font-x-large: calc(var(--op-font-scale-unit) * 2);
175
+ --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4);
176
+ --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8);
177
+ --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2);
178
+ --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6);
179
+ --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8);
180
+ /**
181
+ * @tokens Font Weight
182
+ * @presenter FontWeight
183
+ */
184
+ --op-font-weight-thin: 100;
185
+ --op-font-weight-extra-light: 200;
186
+ --op-font-weight-light: 300;
187
+ --op-font-weight-normal: 400;
188
+ --op-font-weight-medium: 500;
189
+ --op-font-weight-semi-bold: 600;
190
+ --op-font-weight-bold: 700;
191
+ --op-font-weight-extra-bold: 800;
192
+ --op-font-weight-black: 900;
193
+ /**
194
+ * @tokens Font Family
195
+ * @presenter FontFamily
196
+ */
197
+ --op-font-family: "Noto Sans", "Noto Serif", sans-serif;
198
+ /**
199
+ * @tokens Line Height
200
+ * @presenter LineHeight
201
+ */
202
+ --op-line-height-none: 0;
203
+ --op-line-height-densest: 1;
204
+ --op-line-height-denser: 1.15;
205
+ --op-line-height-dense: 1.3;
206
+ --op-line-height-base: 1.5;
207
+ --op-line-height-loose: 1.6;
208
+ --op-line-height-looser: 1.7;
209
+ --op-line-height-loosest: 1.8;
210
+ /**
211
+ * @tokens Letter Spacing
212
+ * @presenter LetterSpacing
213
+ */
214
+ --op-letter-spacing-navigation: 0.01rem;
215
+ --op-letter-spacing-label: 0.04rem;
216
+ /**
217
+ * @tokens Transition
218
+ */
219
+ --op-transition-input: all 120ms ease-in;
220
+ --op-transition-sidebar: all 200ms ease-in-out;
221
+ --op-transition-modal: all 300ms ease-in;
222
+ --op-transition-panel: right 400ms ease-in;
223
+ /**
224
+ * @tokens Animation
225
+ * @presenter Animation
226
+ */
227
+ --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;
228
+ /**
229
+ * @tokens Encoded Images
230
+ */
231
+ --op-form-dropdown-arrow-width: 1rem;
232
+ --op-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
233
+ /**
234
+ * @tokens Space Scale
235
+ * @presenter Spacing
236
+ */
237
+ --op-space-scale-unit: 1rem;
238
+ --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2);
239
+ --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4);
240
+ --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8);
241
+ --op-space-small: calc(var(--op-space-scale-unit) * 1.2);
242
+ --op-space-medium: calc(var(--op-space-scale-unit) * 1.6);
243
+ --op-space-large: calc(var(--op-space-scale-unit) * 2);
244
+ --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4);
245
+ --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8);
246
+ --op-space-3x-large: calc(var(--op-space-scale-unit) * 4);
247
+ --op-space-4x-large: calc(var(--op-space-scale-unit) * 8);
248
+ /**
249
+ * @tokens Shadows
250
+ * @presenter Shadow
251
+ */
252
+ --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
253
+ --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
254
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
255
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
256
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
257
+ /**
258
+ * @tokens Z-Index
259
+ */
260
+ --op-z-index-header: 500;
261
+ --op-z-index-footer: 500;
262
+ --op-z-index-drawer: 700;
263
+ --op-z-index-dialog: 800;
264
+ --op-z-index-dialog-backdrop: 801;
265
+ --op-z-index-dialog-content: 802;
266
+ --op-z-index-dropdown: 900;
267
+ --op-z-index-alert-group: 950;
268
+ --op-z-index-tooltip: 1000;
269
+ /**
270
+ * @tokens Input Heights
271
+ * @presenter Spacing
272
+ */
273
+ --op-input-height-small: 2.8rem;
274
+ --op-input-height-medium: 3.6rem;
275
+ --op-input-height-large: 4rem;
276
+ --op-input-height-x-large: 8.4rem;
277
+ /**
278
+ * @tokens Input Focus
279
+ * @presenter Shadow
280
+ */
281
+ --op-input-outer-focus: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four);
282
+ --op-input-inner-focus: inset var(--op-border-all) var(--op-color-primary-minus-three);
283
+ --op-input-focus: var(--op-input-inner-focus), var(--op-input-outer-focus);
186
284
  }
187
285
 
188
286
  @keyframes rm-slide-in-out-flash {
@@ -190,775 +288,1255 @@ select {
190
288
  right: -100%;
191
289
  }
192
290
  10% {
193
- right: var(--rm-space-large);
291
+ right: var(--op-space-large);
194
292
  }
195
293
  70% {
196
- right: var(--rm-space-large);
294
+ right: var(--op-space-large);
197
295
  }
198
296
  100% {
199
297
  right: -100%;
200
298
  }
201
299
  }
202
300
  :root {
203
- --rm-color-primary-original: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) var(--rm-color-primary-l));
204
- --rm-color-primary-plus-max: var(--rm-color-white);
205
- --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 98%);
206
- --rm-color-primary-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 96%);
207
- --rm-color-primary-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 94%);
208
- --rm-color-primary-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
209
- --rm-color-primary-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%);
210
- --rm-color-primary-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 70%);
211
- --rm-color-primary-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 64%);
212
- --rm-color-primary-plus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 52%);
213
- --rm-color-primary-base: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 40%);
214
- --rm-color-primary-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 36%);
215
- --rm-color-primary-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 32%);
216
- --rm-color-primary-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 28%);
217
- --rm-color-primary-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%);
218
- --rm-color-primary-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
219
- --rm-color-primary-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
220
- --rm-color-primary-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
221
- --rm-color-primary-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
222
- --rm-color-primary-minus-max: var(--rm-color-black);
223
- --rm-color-primary-on-plus-max: var(--rm-color-black);
224
- --rm-color-primary-on-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
225
- --rm-color-primary-on-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
226
- --rm-color-primary-on-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
227
- --rm-color-primary-on-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
228
- --rm-color-primary-on-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%);
229
- --rm-color-primary-on-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
230
- --rm-color-primary-on-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
231
- --rm-color-primary-on-plus-one: var(--rm-color-white);
232
- --rm-color-primary-on-base: var(--rm-color-white);
233
- --rm-color-primary-on-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 94%);
234
- --rm-color-primary-on-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
235
- --rm-color-primary-on-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 86%);
236
- --rm-color-primary-on-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%);
237
- --rm-color-primary-on-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
238
- --rm-color-primary-on-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 94%);
239
- --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 96%);
240
- --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 98%);
241
- --rm-color-primary-on-minus-max: var(--rm-color-white);
242
- --rm-color-neutral-original: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) var(--rm-color-neutral-l));
243
- --rm-color-neutral-plus-max: var(--rm-color-white);
244
- --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 98%);
245
- --rm-color-neutral-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 96%);
246
- --rm-color-neutral-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 94%);
247
- --rm-color-neutral-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
248
- --rm-color-neutral-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%);
249
- --rm-color-neutral-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 70%);
250
- --rm-color-neutral-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 64%);
251
- --rm-color-neutral-plus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 52%);
252
- --rm-color-neutral-base: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 40%);
253
- --rm-color-neutral-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 36%);
254
- --rm-color-neutral-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 32%);
255
- --rm-color-neutral-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 28%);
256
- --rm-color-neutral-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%);
257
- --rm-color-neutral-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
258
- --rm-color-neutral-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
259
- --rm-color-neutral-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
260
- --rm-color-neutral-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
261
- --rm-color-neutral-minus-max: var(--rm-color-black);
262
- --rm-color-neutral-on-plus-max: var(--rm-color-black);
263
- --rm-color-neutral-on-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
264
- --rm-color-neutral-on-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
265
- --rm-color-neutral-on-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
266
- --rm-color-neutral-on-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
267
- --rm-color-neutral-on-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%);
268
- --rm-color-neutral-on-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
269
- --rm-color-neutral-on-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
270
- --rm-color-neutral-on-plus-one: var(--rm-color-black);
271
- --rm-color-neutral-on-base: var(--rm-color-white);
272
- --rm-color-neutral-on-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 94%);
273
- --rm-color-neutral-on-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
274
- --rm-color-neutral-on-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 86%);
275
- --rm-color-neutral-on-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%);
276
- --rm-color-neutral-on-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
277
- --rm-color-neutral-on-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 94%);
278
- --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 96%);
279
- --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 98%);
280
- --rm-color-neutral-on-minus-max: var(--rm-color-white);
281
- --rm-color-alerts-warning-original: hsl(
282
- var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) var(--rm-color-alerts-warning-l)
301
+ /**
302
+ * @tokens Primary Colors
303
+ * @presenter Color
304
+ */
305
+ --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));
306
+ --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
307
+ --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
308
+ --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
309
+ --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
310
+ --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
311
+ --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
312
+ --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
313
+ --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
314
+ --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
315
+ --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
316
+ --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%);
317
+ --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
318
+ --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
319
+ --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
320
+ --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
321
+ --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
322
+ --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
323
+ --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
324
+ --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
325
+ --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
326
+ --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
327
+ --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
328
+ --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
329
+ --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
330
+ --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
331
+ --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
332
+ --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
333
+ --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
334
+ --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
335
+ --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
336
+ --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
337
+ --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
338
+ --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%);
339
+ --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
340
+ --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%);
341
+ --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
342
+ --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%);
343
+ --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
344
+ --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
345
+ --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
346
+ --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
347
+ --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
348
+ --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
349
+ --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
350
+ --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%);
351
+ --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
352
+ --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
353
+ --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
354
+ --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
355
+ --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
356
+ --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
357
+ --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
358
+ --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
359
+ --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
360
+ --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
361
+ --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
362
+ --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
363
+ /**
364
+ * @tokens Neutral Colors
365
+ * @presenter Color
366
+ */
367
+ --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));
368
+ --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
369
+ --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
370
+ --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
371
+ --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
372
+ --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
373
+ --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
374
+ --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%);
375
+ --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
376
+ --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
377
+ --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
378
+ --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
379
+ --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
380
+ --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
381
+ --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
382
+ --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
383
+ --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
384
+ --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
385
+ --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
386
+ --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
387
+ --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
388
+ --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
389
+ --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
390
+ --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%);
391
+ --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
392
+ --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
393
+ --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
394
+ --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
395
+ --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
396
+ --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
397
+ --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
398
+ --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
399
+ --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
400
+ --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
401
+ --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
402
+ --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%);
403
+ --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
404
+ --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
405
+ --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
406
+ --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
407
+ --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
408
+ --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
409
+ --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
410
+ --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
411
+ --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
412
+ --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%);
413
+ --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
414
+ --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
415
+ --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
416
+ --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
417
+ --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
418
+ --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%);
419
+ --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
420
+ --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
421
+ --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
422
+ --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
423
+ --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
424
+ --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
425
+ /**
426
+ * @tokens Alerts Warning Colors
427
+ * @presenter Color
428
+ */
429
+ --op-color-alerts-warning-original: hsl(
430
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l)
283
431
  );
284
- --rm-color-alerts-warning-plus-max: var(--rm-color-white);
285
- --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 98%);
286
- --rm-color-alerts-warning-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 96%);
287
- --rm-color-alerts-warning-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 94%);
288
- --rm-color-alerts-warning-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
289
- --rm-color-alerts-warning-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%);
290
- --rm-color-alerts-warning-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 70%);
291
- --rm-color-alerts-warning-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 64%);
292
- --rm-color-alerts-warning-plus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 52%);
293
- --rm-color-alerts-warning-base: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 40%);
294
- --rm-color-alerts-warning-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 36%);
295
- --rm-color-alerts-warning-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 32%);
296
- --rm-color-alerts-warning-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 28%);
297
- --rm-color-alerts-warning-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%);
298
- --rm-color-alerts-warning-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
299
- --rm-color-alerts-warning-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
300
- --rm-color-alerts-warning-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
301
- --rm-color-alerts-warning-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
302
- --rm-color-alerts-warning-minus-max: var(--rm-color-black);
303
- --rm-color-alerts-warning-on-plus-max: var(--rm-color-black);
304
- --rm-color-alerts-warning-on-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
305
- --rm-color-alerts-warning-on-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
306
- --rm-color-alerts-warning-on-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
307
- --rm-color-alerts-warning-on-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
308
- --rm-color-alerts-warning-on-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%);
309
- --rm-color-alerts-warning-on-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
310
- --rm-color-alerts-warning-on-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
311
- --rm-color-alerts-warning-on-plus-one: var(--rm-color-white);
312
- --rm-color-alerts-warning-on-base: var(--rm-color-white);
313
- --rm-color-alerts-warning-on-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 94%);
314
- --rm-color-alerts-warning-on-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
315
- --rm-color-alerts-warning-on-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 86%);
316
- --rm-color-alerts-warning-on-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%);
317
- --rm-color-alerts-warning-on-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
318
- --rm-color-alerts-warning-on-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 94%);
319
- --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 96%);
320
- --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 98%);
321
- --rm-color-alerts-warning-on-minus-max: var(--rm-color-white);
322
- --rm-color-alerts-danger-original: hsl(
323
- var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) var(--rm-color-alerts-danger-l)
432
+ --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
433
+ --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
434
+ --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
435
+ --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
436
+ --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%);
437
+ --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
438
+ --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
439
+ --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
440
+ --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
441
+ --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
442
+ --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
443
+ --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
444
+ --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%);
445
+ --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
446
+ --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
447
+ --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
448
+ --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
449
+ --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
450
+ --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
451
+ --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
452
+ --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
453
+ --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
454
+ --op-color-alerts-warning-on-plus-eight-alt: hsl(
455
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
324
456
  );
325
- --rm-color-alerts-danger-plus-max: var(--rm-color-white);
326
- --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 98%);
327
- --rm-color-alerts-danger-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 96%);
328
- --rm-color-alerts-danger-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 94%);
329
- --rm-color-alerts-danger-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
330
- --rm-color-alerts-danger-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%);
331
- --rm-color-alerts-danger-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 70%);
332
- --rm-color-alerts-danger-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 64%);
333
- --rm-color-alerts-danger-plus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 52%);
334
- --rm-color-alerts-danger-base: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 40%);
335
- --rm-color-alerts-danger-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 36%);
336
- --rm-color-alerts-danger-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 32%);
337
- --rm-color-alerts-danger-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 28%);
338
- --rm-color-alerts-danger-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%);
339
- --rm-color-alerts-danger-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
340
- --rm-color-alerts-danger-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
341
- --rm-color-alerts-danger-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
342
- --rm-color-alerts-danger-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
343
- --rm-color-alerts-danger-minus-max: var(--rm-color-black);
344
- --rm-color-alerts-danger-on-plus-max: var(--rm-color-black);
345
- --rm-color-alerts-danger-on-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
346
- --rm-color-alerts-danger-on-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
347
- --rm-color-alerts-danger-on-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
348
- --rm-color-alerts-danger-on-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
349
- --rm-color-alerts-danger-on-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%);
350
- --rm-color-alerts-danger-on-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
351
- --rm-color-alerts-danger-on-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
352
- --rm-color-alerts-danger-on-plus-one: var(--rm-color-white);
353
- --rm-color-alerts-danger-on-base: var(--rm-color-white);
354
- --rm-color-alerts-danger-on-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 94%);
355
- --rm-color-alerts-danger-on-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
356
- --rm-color-alerts-danger-on-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 86%);
357
- --rm-color-alerts-danger-on-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%);
358
- --rm-color-alerts-danger-on-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
359
- --rm-color-alerts-danger-on-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 94%);
360
- --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 96%);
361
- --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 98%);
362
- --rm-color-alerts-danger-on-minus-max: var(--rm-color-white);
363
- --rm-color-alerts-info-original: hsl(
364
- var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) var(--rm-color-alerts-info-l)
457
+ --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
458
+ --op-color-alerts-warning-on-plus-seven-alt: hsl(
459
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%
365
460
  );
366
- --rm-color-alerts-info-plus-max: var(--rm-color-white);
367
- --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 98%);
368
- --rm-color-alerts-info-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 96%);
369
- --rm-color-alerts-info-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 94%);
370
- --rm-color-alerts-info-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
371
- --rm-color-alerts-info-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%);
372
- --rm-color-alerts-info-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 70%);
373
- --rm-color-alerts-info-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 64%);
374
- --rm-color-alerts-info-plus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 52%);
375
- --rm-color-alerts-info-base: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 40%);
376
- --rm-color-alerts-info-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 36%);
377
- --rm-color-alerts-info-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 32%);
378
- --rm-color-alerts-info-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 28%);
379
- --rm-color-alerts-info-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%);
380
- --rm-color-alerts-info-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
381
- --rm-color-alerts-info-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
382
- --rm-color-alerts-info-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
383
- --rm-color-alerts-info-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
384
- --rm-color-alerts-info-minus-max: var(--rm-color-black);
385
- --rm-color-alerts-info-on-plus-max: var(--rm-color-black);
386
- --rm-color-alerts-info-on-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
387
- --rm-color-alerts-info-on-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
388
- --rm-color-alerts-info-on-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
389
- --rm-color-alerts-info-on-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
390
- --rm-color-alerts-info-on-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%);
391
- --rm-color-alerts-info-on-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
392
- --rm-color-alerts-info-on-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
393
- --rm-color-alerts-info-on-plus-one: var(--rm-color-white);
394
- --rm-color-alerts-info-on-base: var(--rm-color-white);
395
- --rm-color-alerts-info-on-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 94%);
396
- --rm-color-alerts-info-on-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
397
- --rm-color-alerts-info-on-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 86%);
398
- --rm-color-alerts-info-on-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%);
399
- --rm-color-alerts-info-on-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
400
- --rm-color-alerts-info-on-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 94%);
401
- --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 96%);
402
- --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 98%);
403
- --rm-color-alerts-info-on-minus-max: var(--rm-color-white);
404
- --rm-color-alerts-notice-original: hsl(
405
- var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) var(--rm-color-alerts-notice-l)
461
+ --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
462
+ --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
463
+ --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
464
+ --op-color-alerts-warning-on-plus-five-alt: hsl(
465
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%
406
466
  );
407
- --rm-color-alerts-notice-plus-max: var(--rm-color-white);
408
- --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 98%);
409
- --rm-color-alerts-notice-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 96%);
410
- --rm-color-alerts-notice-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 94%);
411
- --rm-color-alerts-notice-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
412
- --rm-color-alerts-notice-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%);
413
- --rm-color-alerts-notice-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 70%);
414
- --rm-color-alerts-notice-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 64%);
415
- --rm-color-alerts-notice-plus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 52%);
416
- --rm-color-alerts-notice-base: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 40%);
417
- --rm-color-alerts-notice-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 36%);
418
- --rm-color-alerts-notice-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 32%);
419
- --rm-color-alerts-notice-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 28%);
420
- --rm-color-alerts-notice-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%);
421
- --rm-color-alerts-notice-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
422
- --rm-color-alerts-notice-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
423
- --rm-color-alerts-notice-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
424
- --rm-color-alerts-notice-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
425
- --rm-color-alerts-notice-minus-max: var(--rm-color-black);
426
- --rm-color-alerts-notice-on-plus-max: var(--rm-color-black);
427
- --rm-color-alerts-notice-on-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
428
- --rm-color-alerts-notice-on-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
429
- --rm-color-alerts-notice-on-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
430
- --rm-color-alerts-notice-on-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
431
- --rm-color-alerts-notice-on-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%);
432
- --rm-color-alerts-notice-on-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
433
- --rm-color-alerts-notice-on-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
434
- --rm-color-alerts-notice-on-plus-one: var(--rm-color-white);
435
- --rm-color-alerts-notice-on-base: var(--rm-color-white);
436
- --rm-color-alerts-notice-on-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 94%);
437
- --rm-color-alerts-notice-on-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
438
- --rm-color-alerts-notice-on-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 86%);
439
- --rm-color-alerts-notice-on-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%);
440
- --rm-color-alerts-notice-on-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
441
- --rm-color-alerts-notice-on-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 94%);
442
- --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 96%);
443
- --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 98%);
444
- --rm-color-alerts-notice-on-minus-max: var(--rm-color-white);
445
- --rm-color-background: var(--rm-color-neutral-plus-eight);
446
- --rm-color-on-background: var(--rm-color-neutral-on-plus-eight);
467
+ --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
468
+ --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
469
+ --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
470
+ --op-color-alerts-warning-on-plus-three-alt: hsl(
471
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%
472
+ );
473
+ --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
474
+ --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
475
+ --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
476
+ --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%);
477
+ --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
478
+ --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
479
+ --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
480
+ --op-color-alerts-warning-on-minus-one-alt: hsl(
481
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%
482
+ );
483
+ --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
484
+ --op-color-alerts-warning-on-minus-two-alt: hsl(
485
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%
486
+ );
487
+ --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
488
+ --op-color-alerts-warning-on-minus-three-alt: hsl(
489
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%
490
+ );
491
+ --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
492
+ --op-color-alerts-warning-on-minus-four-alt: hsl(
493
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%
494
+ );
495
+ --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
496
+ --op-color-alerts-warning-on-minus-five-alt: hsl(
497
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%
498
+ );
499
+ --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
500
+ --op-color-alerts-warning-on-minus-six-alt: hsl(
501
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%
502
+ );
503
+ --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
504
+ --op-color-alerts-warning-on-minus-seven-alt: hsl(
505
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%
506
+ );
507
+ --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
508
+ --op-color-alerts-warning-on-minus-eight-alt: hsl(
509
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%
510
+ );
511
+ --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
512
+ --op-color-alerts-warning-on-minus-max-alt: hsl(
513
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%
514
+ );
515
+ /**
516
+ * @tokens Alerts Danger Colors
517
+ * @presenter Color
518
+ */
519
+ --op-color-alerts-danger-original: hsl(
520
+ var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l)
521
+ );
522
+ --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
523
+ --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
524
+ --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
525
+ --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
526
+ --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
527
+ --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
528
+ --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
529
+ --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
530
+ --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%);
531
+ --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
532
+ --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
533
+ --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
534
+ --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
535
+ --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
536
+ --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
537
+ --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
538
+ --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
539
+ --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
540
+ --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
541
+ --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
542
+ --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
543
+ --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
544
+ --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
545
+ --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
546
+ --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
547
+ --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
548
+ --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
549
+ --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
550
+ --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%);
551
+ --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
552
+ --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
553
+ --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
554
+ --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
555
+ --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
556
+ --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
557
+ --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
558
+ --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%);
559
+ --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
560
+ --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
561
+ --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
562
+ --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
563
+ --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
564
+ --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%);
565
+ --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%);
566
+ --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%);
567
+ --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
568
+ --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%);
569
+ --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
570
+ --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%);
571
+ --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
572
+ --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%);
573
+ --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
574
+ --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
575
+ --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
576
+ --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%);
577
+ --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
578
+ --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
579
+ /**
580
+ * @tokens Alerts Info Colors
581
+ * @presenter Color
582
+ */
583
+ --op-color-alerts-info-original: hsl(
584
+ var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l)
585
+ );
586
+ --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
587
+ --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
588
+ --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
589
+ --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
590
+ --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
591
+ --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
592
+ --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
593
+ --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
594
+ --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%);
595
+ --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
596
+ --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
597
+ --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
598
+ --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
599
+ --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
600
+ --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
601
+ --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
602
+ --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
603
+ --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
604
+ --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
605
+ --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
606
+ --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
607
+ --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
608
+ --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
609
+ --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
610
+ --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
611
+ --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
612
+ --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
613
+ --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
614
+ --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
615
+ --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
616
+ --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
617
+ --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
618
+ --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%);
619
+ --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
620
+ --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%);
621
+ --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
622
+ --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%);
623
+ --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
624
+ --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
625
+ --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
626
+ --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
627
+ --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
628
+ --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
629
+ --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
630
+ --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
631
+ --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
632
+ --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
633
+ --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
634
+ --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
635
+ --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
636
+ --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
637
+ --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
638
+ --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
639
+ --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
640
+ --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
641
+ --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
642
+ --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
643
+ /**
644
+ * @tokens Alerts Notice Colors
645
+ * @presenter Color
646
+ */
647
+ --op-color-alerts-notice-original: hsl(
648
+ var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l)
649
+ );
650
+ --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
651
+ --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
652
+ --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
653
+ --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
654
+ --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
655
+ --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
656
+ --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%);
657
+ --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
658
+ --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%);
659
+ --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
660
+ --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
661
+ --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
662
+ --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
663
+ --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%);
664
+ --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
665
+ --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
666
+ --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
667
+ --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
668
+ --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
669
+ --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
670
+ --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
671
+ --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
672
+ --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
673
+ --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
674
+ --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
675
+ --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
676
+ --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
677
+ --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
678
+ --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%);
679
+ --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
680
+ --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
681
+ --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
682
+ --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
683
+ --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
684
+ --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
685
+ --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
686
+ --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%);
687
+ --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
688
+ --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
689
+ --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
690
+ --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
691
+ --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
692
+ --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%);
693
+ --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
694
+ --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%);
695
+ --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
696
+ --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%);
697
+ --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
698
+ --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%);
699
+ --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
700
+ --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
701
+ --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
702
+ --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
703
+ --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
704
+ --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%);
705
+ --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
706
+ --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
707
+ /**
708
+ * @tokens Basic Colors
709
+ * @presenter Color
710
+ */
711
+ --op-color-background: var(--op-color-neutral-plus-eight);
712
+ --op-color-on-background: var(--op-color-neutral-on-plus-eight);
447
713
  }
448
714
 
449
715
  @media (prefers-color-scheme: dark) {
450
716
  :root:not([data-theme-mode=light]) {
451
- --rm-color-primary-plus-max: var(--rm-color-black);
452
- --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
453
- --rm-color-primary-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
454
- --rm-color-primary-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 12%);
455
- --rm-color-primary-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 14%);
456
- --rm-color-primary-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
457
- --rm-color-primary-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
458
- --rm-color-primary-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%);
459
- --rm-color-primary-plus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 28%);
460
- --rm-color-primary-base: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 32%);
461
- --rm-color-primary-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 36%);
462
- --rm-color-primary-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 40%);
463
- --rm-color-primary-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 48%);
464
- --rm-color-primary-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 52%);
465
- --rm-color-primary-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 64%);
466
- --rm-color-primary-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
467
- --rm-color-primary-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
468
- --rm-color-primary-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
469
- --rm-color-primary-minus-max: var(--rm-color-white);
470
- --rm-color-primary-on-plus-max: var(--rm-color-white);
471
- --rm-color-primary-on-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
472
- --rm-color-primary-on-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
473
- --rm-color-primary-on-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
474
- --rm-color-primary-on-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
475
- --rm-color-primary-on-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
476
- --rm-color-primary-on-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
477
- --rm-color-primary-on-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
478
- --rm-color-primary-on-plus-one: var(--rm-color-white);
479
- --rm-color-primary-on-base: var(--rm-color-white);
480
- --rm-color-primary-on-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
481
- --rm-color-primary-on-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
482
- --rm-color-primary-on-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 86%);
483
- --rm-color-primary-on-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%);
484
- --rm-color-primary-on-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
485
- --rm-color-primary-on-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
486
- --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
487
- --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
488
- --rm-color-primary-on-minus-max: var(--rm-color-black);
489
- --rm-color-neutral-plus-max: var(--rm-color-black);
490
- --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
491
- --rm-color-neutral-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
492
- --rm-color-neutral-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 12%);
493
- --rm-color-neutral-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 14%);
494
- --rm-color-neutral-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
495
- --rm-color-neutral-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
496
- --rm-color-neutral-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%);
497
- --rm-color-neutral-plus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 28%);
498
- --rm-color-neutral-base: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 32%);
499
- --rm-color-neutral-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 36%);
500
- --rm-color-neutral-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 40%);
501
- --rm-color-neutral-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 48%);
502
- --rm-color-neutral-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 52%);
503
- --rm-color-neutral-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 64%);
504
- --rm-color-neutral-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
505
- --rm-color-neutral-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
506
- --rm-color-neutral-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
507
- --rm-color-neutral-minus-max: var(--rm-color-white);
508
- --rm-color-neutral-on-plus-max: var(--rm-color-white);
509
- --rm-color-neutral-on-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
510
- --rm-color-neutral-on-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
511
- --rm-color-neutral-on-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
512
- --rm-color-neutral-on-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
513
- --rm-color-neutral-on-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
514
- --rm-color-neutral-on-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
515
- --rm-color-neutral-on-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
516
- --rm-color-neutral-on-plus-one: var(--rm-color-white);
517
- --rm-color-neutral-on-base: var(--rm-color-white);
518
- --rm-color-neutral-on-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
519
- --rm-color-neutral-on-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
520
- --rm-color-neutral-on-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 86%);
521
- --rm-color-neutral-on-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%);
522
- --rm-color-neutral-on-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
523
- --rm-color-neutral-on-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
524
- --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
525
- --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
526
- --rm-color-neutral-on-minus-max: var(--rm-color-black);
527
- --rm-color-alerts-warning-plus-max: var(--rm-color-black);
528
- --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
529
- --rm-color-alerts-warning-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
530
- --rm-color-alerts-warning-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 12%);
531
- --rm-color-alerts-warning-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 14%);
532
- --rm-color-alerts-warning-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
533
- --rm-color-alerts-warning-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
534
- --rm-color-alerts-warning-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%);
535
- --rm-color-alerts-warning-plus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 28%);
536
- --rm-color-alerts-warning-base: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 32%);
537
- --rm-color-alerts-warning-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 36%);
538
- --rm-color-alerts-warning-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 40%);
539
- --rm-color-alerts-warning-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 48%);
540
- --rm-color-alerts-warning-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 52%);
541
- --rm-color-alerts-warning-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 64%);
542
- --rm-color-alerts-warning-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
543
- --rm-color-alerts-warning-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
544
- --rm-color-alerts-warning-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
545
- --rm-color-alerts-warning-minus-max: var(--rm-color-white);
546
- --rm-color-alerts-warning-on-plus-max: var(--rm-color-white);
547
- --rm-color-alerts-warning-on-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
548
- --rm-color-alerts-warning-on-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
549
- --rm-color-alerts-warning-on-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
550
- --rm-color-alerts-warning-on-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
551
- --rm-color-alerts-warning-on-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
552
- --rm-color-alerts-warning-on-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
553
- --rm-color-alerts-warning-on-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
554
- --rm-color-alerts-warning-on-plus-one: var(--rm-color-white);
555
- --rm-color-alerts-warning-on-base: var(--rm-color-white);
556
- --rm-color-alerts-warning-on-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
557
- --rm-color-alerts-warning-on-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
558
- --rm-color-alerts-warning-on-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 86%);
559
- --rm-color-alerts-warning-on-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%);
560
- --rm-color-alerts-warning-on-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
561
- --rm-color-alerts-warning-on-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
562
- --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
563
- --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
564
- --rm-color-alerts-warning-on-minus-max: var(--rm-color-black);
565
- --rm-color-alerts-danger-plus-max: var(--rm-color-black);
566
- --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
567
- --rm-color-alerts-danger-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
568
- --rm-color-alerts-danger-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 12%);
569
- --rm-color-alerts-danger-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 14%);
570
- --rm-color-alerts-danger-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
571
- --rm-color-alerts-danger-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
572
- --rm-color-alerts-danger-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%);
573
- --rm-color-alerts-danger-plus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 28%);
574
- --rm-color-alerts-danger-base: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 32%);
575
- --rm-color-alerts-danger-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 36%);
576
- --rm-color-alerts-danger-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 40%);
577
- --rm-color-alerts-danger-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 48%);
578
- --rm-color-alerts-danger-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 52%);
579
- --rm-color-alerts-danger-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 64%);
580
- --rm-color-alerts-danger-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
581
- --rm-color-alerts-danger-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
582
- --rm-color-alerts-danger-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
583
- --rm-color-alerts-danger-minus-max: var(--rm-color-white);
584
- --rm-color-alerts-danger-on-plus-max: var(--rm-color-white);
585
- --rm-color-alerts-danger-on-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
586
- --rm-color-alerts-danger-on-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
587
- --rm-color-alerts-danger-on-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
588
- --rm-color-alerts-danger-on-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
589
- --rm-color-alerts-danger-on-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
590
- --rm-color-alerts-danger-on-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
591
- --rm-color-alerts-danger-on-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
592
- --rm-color-alerts-danger-on-plus-one: var(--rm-color-white);
593
- --rm-color-alerts-danger-on-base: var(--rm-color-white);
594
- --rm-color-alerts-danger-on-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
595
- --rm-color-alerts-danger-on-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
596
- --rm-color-alerts-danger-on-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 86%);
597
- --rm-color-alerts-danger-on-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%);
598
- --rm-color-alerts-danger-on-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
599
- --rm-color-alerts-danger-on-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
600
- --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
601
- --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
602
- --rm-color-alerts-danger-on-minus-max: var(--rm-color-black);
603
- --rm-color-alerts-info-plus-max: var(--rm-color-black);
604
- --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
605
- --rm-color-alerts-info-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
606
- --rm-color-alerts-info-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 12%);
607
- --rm-color-alerts-info-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 14%);
608
- --rm-color-alerts-info-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
609
- --rm-color-alerts-info-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
610
- --rm-color-alerts-info-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%);
611
- --rm-color-alerts-info-plus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 28%);
612
- --rm-color-alerts-info-base: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 32%);
613
- --rm-color-alerts-info-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 36%);
614
- --rm-color-alerts-info-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 40%);
615
- --rm-color-alerts-info-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 48%);
616
- --rm-color-alerts-info-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 52%);
617
- --rm-color-alerts-info-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 64%);
618
- --rm-color-alerts-info-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
619
- --rm-color-alerts-info-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
620
- --rm-color-alerts-info-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
621
- --rm-color-alerts-info-minus-max: var(--rm-color-white);
622
- --rm-color-alerts-info-on-plus-max: var(--rm-color-white);
623
- --rm-color-alerts-info-on-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
624
- --rm-color-alerts-info-on-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
625
- --rm-color-alerts-info-on-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
626
- --rm-color-alerts-info-on-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
627
- --rm-color-alerts-info-on-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
628
- --rm-color-alerts-info-on-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
629
- --rm-color-alerts-info-on-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
630
- --rm-color-alerts-info-on-plus-one: var(--rm-color-white);
631
- --rm-color-alerts-info-on-base: var(--rm-color-white);
632
- --rm-color-alerts-info-on-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
633
- --rm-color-alerts-info-on-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
634
- --rm-color-alerts-info-on-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 86%);
635
- --rm-color-alerts-info-on-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%);
636
- --rm-color-alerts-info-on-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
637
- --rm-color-alerts-info-on-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
638
- --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
639
- --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
640
- --rm-color-alerts-info-on-minus-max: var(--rm-color-black);
641
- --rm-color-alerts-notice-plus-max: var(--rm-color-black);
642
- --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
643
- --rm-color-alerts-notice-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
644
- --rm-color-alerts-notice-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 12%);
645
- --rm-color-alerts-notice-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 14%);
646
- --rm-color-alerts-notice-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
647
- --rm-color-alerts-notice-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
648
- --rm-color-alerts-notice-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%);
649
- --rm-color-alerts-notice-plus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 28%);
650
- --rm-color-alerts-notice-base: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 32%);
651
- --rm-color-alerts-notice-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 36%);
652
- --rm-color-alerts-notice-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 40%);
653
- --rm-color-alerts-notice-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 48%);
654
- --rm-color-alerts-notice-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 52%);
655
- --rm-color-alerts-notice-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 64%);
656
- --rm-color-alerts-notice-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
657
- --rm-color-alerts-notice-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
658
- --rm-color-alerts-notice-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
659
- --rm-color-alerts-notice-minus-max: var(--rm-color-white);
660
- --rm-color-alerts-notice-on-plus-max: var(--rm-color-white);
661
- --rm-color-alerts-notice-on-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
662
- --rm-color-alerts-notice-on-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
663
- --rm-color-alerts-notice-on-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
664
- --rm-color-alerts-notice-on-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
665
- --rm-color-alerts-notice-on-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
666
- --rm-color-alerts-notice-on-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
667
- --rm-color-alerts-notice-on-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
668
- --rm-color-alerts-notice-on-plus-one: var(--rm-color-white);
669
- --rm-color-alerts-notice-on-base: var(--rm-color-white);
670
- --rm-color-alerts-notice-on-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
671
- --rm-color-alerts-notice-on-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
672
- --rm-color-alerts-notice-on-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 86%);
673
- --rm-color-alerts-notice-on-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%);
674
- --rm-color-alerts-notice-on-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
675
- --rm-color-alerts-notice-on-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
676
- --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
677
- --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
678
- --rm-color-alerts-notice-on-minus-max: var(--rm-color-black);
679
- --rm-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
680
- --rm-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
681
- --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
682
- --rm-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
683
- --rm-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
684
- }
685
- :root:not([data-theme-mode=light]) .modal__content {
686
- background: var(--rm-color-neutral-plus-seven);
687
- color: var(--rm-color-neutral-on-plus-seven);
688
- }
689
- :root:not([data-theme-mode=light]) .modal__close:hover {
690
- background: var(--rm-color-background);
691
- }
692
- :root:not([data-theme-mode=light]) .panel {
693
- background: var(--rm-color-neutral-plus-seven);
694
- color: var(--rm-color-neutral-on-plus-seven);
695
- }
696
- :root:not([data-theme-mode=light]) .panel__close:hover {
697
- background: var(--rm-color-background);
717
+ /**
718
+ * @tokens Primary Dark Colors
719
+ * @presenter Color
720
+ */
721
+ --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
722
+ --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
723
+ --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
724
+ --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
725
+ --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
726
+ --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
727
+ --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
728
+ --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
729
+ --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
730
+ --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
731
+ --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
732
+ --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
733
+ --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
734
+ --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
735
+ --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
736
+ --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
737
+ --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
738
+ --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
739
+ --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
740
+ --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
741
+ --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
742
+ --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
743
+ --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
744
+ --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
745
+ --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
746
+ --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
747
+ --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
748
+ --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
749
+ --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
750
+ --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
751
+ --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
752
+ --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
753
+ --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
754
+ --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
755
+ --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
756
+ --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
757
+ --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
758
+ --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
759
+ --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
760
+ --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
761
+ --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
762
+ --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
763
+ --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
764
+ --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
765
+ --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
766
+ --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
767
+ --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
768
+ --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
769
+ --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
770
+ --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
771
+ --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
772
+ --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
773
+ --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
774
+ --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
775
+ --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
776
+ --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
777
+ --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
778
+ /**
779
+ * @tokens Neutral Dark Colors
780
+ * @presenter Color
781
+ */
782
+ --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
783
+ --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
784
+ --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
785
+ --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
786
+ --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
787
+ --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
788
+ --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
789
+ --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
790
+ --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
791
+ --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
792
+ --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
793
+ --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
794
+ --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
795
+ --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
796
+ --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
797
+ --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
798
+ --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
799
+ --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
800
+ --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
801
+ --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
802
+ --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
803
+ --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
804
+ --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
805
+ --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
806
+ --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
807
+ --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
808
+ --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
809
+ --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
810
+ --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
811
+ --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
812
+ --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
813
+ --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
814
+ --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
815
+ --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
816
+ --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
817
+ --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
818
+ --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
819
+ --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
820
+ --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
821
+ --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
822
+ --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
823
+ --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
824
+ --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
825
+ --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
826
+ --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
827
+ --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
828
+ --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
829
+ --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
830
+ --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
831
+ --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
832
+ --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
833
+ --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
834
+ --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
835
+ --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
836
+ --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
837
+ --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
838
+ --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
839
+ /**
840
+ * @tokens Alerts Warning Dark Colors
841
+ * @presenter Color
842
+ */
843
+ --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
844
+ --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
845
+ --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
846
+ --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
847
+ --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
848
+ --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
849
+ --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
850
+ --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
851
+ --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
852
+ --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
853
+ --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
854
+ --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
855
+ --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
856
+ --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
857
+ --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
858
+ --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
859
+ --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
860
+ --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
861
+ --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
862
+ --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
863
+ --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
864
+ --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
865
+ --op-color-alerts-warning-on-plus-eight-alt: hsl(
866
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
867
+ );
868
+ --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
869
+ --op-color-alerts-warning-on-plus-seven-alt: hsl(
870
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
871
+ );
872
+ --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
873
+ --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
874
+ --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
875
+ --op-color-alerts-warning-on-plus-five-alt: hsl(
876
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%
877
+ );
878
+ --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
879
+ --op-color-alerts-warning-on-plus-four-alt: hsl(
880
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
881
+ );
882
+ --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
883
+ --op-color-alerts-warning-on-plus-three-alt: hsl(
884
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
885
+ );
886
+ --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
887
+ --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
888
+ --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
889
+ --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
890
+ --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
891
+ --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
892
+ --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
893
+ --op-color-alerts-warning-on-minus-one-alt: hsl(
894
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
895
+ );
896
+ --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
897
+ --op-color-alerts-warning-on-minus-two-alt: hsl(
898
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%
899
+ );
900
+ --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
901
+ --op-color-alerts-warning-on-minus-three-alt: hsl(
902
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
903
+ );
904
+ --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
905
+ --op-color-alerts-warning-on-minus-four-alt: hsl(
906
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
907
+ );
908
+ --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
909
+ --op-color-alerts-warning-on-minus-five-alt: hsl(
910
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%
911
+ );
912
+ --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
913
+ --op-color-alerts-warning-on-minus-six-alt: hsl(
914
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%
915
+ );
916
+ --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
917
+ --op-color-alerts-warning-on-minus-seven-alt: hsl(
918
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
919
+ );
920
+ --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
921
+ --op-color-alerts-warning-on-minus-eight-alt: hsl(
922
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%
923
+ );
924
+ --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
925
+ --op-color-alerts-warning-on-minus-max-alt: hsl(
926
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
927
+ );
928
+ /**
929
+ * @tokens Alerts Danger Dark Colors
930
+ * @presenter Color
931
+ */
932
+ --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
933
+ --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
934
+ --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
935
+ --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
936
+ --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
937
+ --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
938
+ --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
939
+ --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
940
+ --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
941
+ --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
942
+ --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
943
+ --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
944
+ --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
945
+ --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
946
+ --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
947
+ --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
948
+ --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
949
+ --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
950
+ --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
951
+ --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
952
+ --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
953
+ --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
954
+ --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
955
+ --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
956
+ --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
957
+ --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
958
+ --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
959
+ --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
960
+ --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
961
+ --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
962
+ --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
963
+ --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
964
+ --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
965
+ --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
966
+ --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
967
+ --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
968
+ --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
969
+ --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
970
+ --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
971
+ --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
972
+ --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
973
+ --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
974
+ --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
975
+ --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
976
+ --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
977
+ --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
978
+ --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
979
+ --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
980
+ --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
981
+ --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
982
+ --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
983
+ --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
984
+ --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
985
+ --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
986
+ --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
987
+ --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
988
+ --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
989
+ /**
990
+ * @tokens Alerts Info Dark Colors
991
+ * @presenter Color
992
+ */
993
+ --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
994
+ --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
995
+ --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
996
+ --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
997
+ --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
998
+ --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
999
+ --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1000
+ --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
1001
+ --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1002
+ --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1003
+ --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
1004
+ --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
1005
+ --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
1006
+ --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
1007
+ --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
1008
+ --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1009
+ --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1010
+ --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1011
+ --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
1012
+ --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
1013
+ --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1014
+ --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1015
+ --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1016
+ --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1017
+ --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
1018
+ --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1019
+ --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1020
+ --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
1021
+ --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1022
+ --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1023
+ --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
1024
+ --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1025
+ --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1026
+ --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1027
+ --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
1028
+ --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1029
+ --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1030
+ --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1031
+ --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1032
+ --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1033
+ --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1034
+ --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1035
+ --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
1036
+ --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1037
+ --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1038
+ --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1039
+ --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1040
+ --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
1041
+ --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1042
+ --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1043
+ --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1044
+ --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1045
+ --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1046
+ --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1047
+ --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
1048
+ --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
1049
+ --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1050
+ /**
1051
+ * @tokens Alerts Notice Dark Colors
1052
+ * @presenter Color
1053
+ */
1054
+ --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1055
+ --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
1056
+ --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
1057
+ --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
1058
+ --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
1059
+ --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1060
+ --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1061
+ --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1062
+ --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1063
+ --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
1064
+ --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
1065
+ --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
1066
+ --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
1067
+ --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
1068
+ --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
1069
+ --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1070
+ --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1071
+ --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1072
+ --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1073
+ --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1074
+ --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1075
+ --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1076
+ --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
1077
+ --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
1078
+ --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1079
+ --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1080
+ --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1081
+ --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1082
+ --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1083
+ --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1084
+ --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1085
+ --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1086
+ --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
1087
+ --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1088
+ --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1089
+ --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1090
+ --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
1091
+ --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
1092
+ --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
1093
+ --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1094
+ --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
1095
+ --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1096
+ --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
1097
+ --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1098
+ --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
1099
+ --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1100
+ --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1101
+ --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
1102
+ --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1103
+ --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1104
+ --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1105
+ --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1106
+ --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
1107
+ --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1108
+ --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1109
+ --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1110
+ --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1111
+ /**
1112
+ * @tokens Dark Shadows
1113
+ * @presenter Shadow
1114
+ */
1115
+ --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1116
+ --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1117
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
1118
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
1119
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
698
1120
  }
699
1121
  }
700
1122
  :root[data-theme-mode=dark] {
701
- --rm-color-primary-plus-max: var(--rm-color-black);
702
- --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
703
- --rm-color-primary-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
704
- --rm-color-primary-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 12%);
705
- --rm-color-primary-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 14%);
706
- --rm-color-primary-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
707
- --rm-color-primary-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
708
- --rm-color-primary-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%);
709
- --rm-color-primary-plus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 28%);
710
- --rm-color-primary-base: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 32%);
711
- --rm-color-primary-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 36%);
712
- --rm-color-primary-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 40%);
713
- --rm-color-primary-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 48%);
714
- --rm-color-primary-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 52%);
715
- --rm-color-primary-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 64%);
716
- --rm-color-primary-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
717
- --rm-color-primary-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
718
- --rm-color-primary-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
719
- --rm-color-primary-minus-max: var(--rm-color-white);
720
- --rm-color-primary-on-plus-max: var(--rm-color-white);
721
- --rm-color-primary-on-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
722
- --rm-color-primary-on-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
723
- --rm-color-primary-on-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
724
- --rm-color-primary-on-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
725
- --rm-color-primary-on-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
726
- --rm-color-primary-on-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
727
- --rm-color-primary-on-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
728
- --rm-color-primary-on-plus-one: var(--rm-color-white);
729
- --rm-color-primary-on-base: var(--rm-color-white);
730
- --rm-color-primary-on-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
731
- --rm-color-primary-on-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
732
- --rm-color-primary-on-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 86%);
733
- --rm-color-primary-on-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%);
734
- --rm-color-primary-on-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
735
- --rm-color-primary-on-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
736
- --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
737
- --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
738
- --rm-color-primary-on-minus-max: var(--rm-color-black);
739
- --rm-color-neutral-plus-max: var(--rm-color-black);
740
- --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
741
- --rm-color-neutral-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
742
- --rm-color-neutral-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 12%);
743
- --rm-color-neutral-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 14%);
744
- --rm-color-neutral-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
745
- --rm-color-neutral-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
746
- --rm-color-neutral-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%);
747
- --rm-color-neutral-plus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 28%);
748
- --rm-color-neutral-base: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 32%);
749
- --rm-color-neutral-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 36%);
750
- --rm-color-neutral-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 40%);
751
- --rm-color-neutral-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 48%);
752
- --rm-color-neutral-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 52%);
753
- --rm-color-neutral-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 64%);
754
- --rm-color-neutral-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
755
- --rm-color-neutral-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
756
- --rm-color-neutral-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
757
- --rm-color-neutral-minus-max: var(--rm-color-white);
758
- --rm-color-neutral-on-plus-max: var(--rm-color-white);
759
- --rm-color-neutral-on-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
760
- --rm-color-neutral-on-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
761
- --rm-color-neutral-on-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
762
- --rm-color-neutral-on-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
763
- --rm-color-neutral-on-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
764
- --rm-color-neutral-on-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
765
- --rm-color-neutral-on-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
766
- --rm-color-neutral-on-plus-one: var(--rm-color-white);
767
- --rm-color-neutral-on-base: var(--rm-color-white);
768
- --rm-color-neutral-on-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
769
- --rm-color-neutral-on-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
770
- --rm-color-neutral-on-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 86%);
771
- --rm-color-neutral-on-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%);
772
- --rm-color-neutral-on-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
773
- --rm-color-neutral-on-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
774
- --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
775
- --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
776
- --rm-color-neutral-on-minus-max: var(--rm-color-black);
777
- --rm-color-alerts-warning-plus-max: var(--rm-color-black);
778
- --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
779
- --rm-color-alerts-warning-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
780
- --rm-color-alerts-warning-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 12%);
781
- --rm-color-alerts-warning-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 14%);
782
- --rm-color-alerts-warning-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
783
- --rm-color-alerts-warning-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
784
- --rm-color-alerts-warning-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%);
785
- --rm-color-alerts-warning-plus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 28%);
786
- --rm-color-alerts-warning-base: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 32%);
787
- --rm-color-alerts-warning-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 36%);
788
- --rm-color-alerts-warning-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 40%);
789
- --rm-color-alerts-warning-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 48%);
790
- --rm-color-alerts-warning-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 52%);
791
- --rm-color-alerts-warning-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 64%);
792
- --rm-color-alerts-warning-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
793
- --rm-color-alerts-warning-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
794
- --rm-color-alerts-warning-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
795
- --rm-color-alerts-warning-minus-max: var(--rm-color-white);
796
- --rm-color-alerts-warning-on-plus-max: var(--rm-color-white);
797
- --rm-color-alerts-warning-on-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
798
- --rm-color-alerts-warning-on-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
799
- --rm-color-alerts-warning-on-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
800
- --rm-color-alerts-warning-on-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
801
- --rm-color-alerts-warning-on-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
802
- --rm-color-alerts-warning-on-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
803
- --rm-color-alerts-warning-on-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
804
- --rm-color-alerts-warning-on-plus-one: var(--rm-color-white);
805
- --rm-color-alerts-warning-on-base: var(--rm-color-white);
806
- --rm-color-alerts-warning-on-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
807
- --rm-color-alerts-warning-on-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
808
- --rm-color-alerts-warning-on-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 86%);
809
- --rm-color-alerts-warning-on-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%);
810
- --rm-color-alerts-warning-on-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
811
- --rm-color-alerts-warning-on-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
812
- --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
813
- --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
814
- --rm-color-alerts-warning-on-minus-max: var(--rm-color-black);
815
- --rm-color-alerts-danger-plus-max: var(--rm-color-black);
816
- --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
817
- --rm-color-alerts-danger-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
818
- --rm-color-alerts-danger-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 12%);
819
- --rm-color-alerts-danger-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 14%);
820
- --rm-color-alerts-danger-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
821
- --rm-color-alerts-danger-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
822
- --rm-color-alerts-danger-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%);
823
- --rm-color-alerts-danger-plus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 28%);
824
- --rm-color-alerts-danger-base: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 32%);
825
- --rm-color-alerts-danger-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 36%);
826
- --rm-color-alerts-danger-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 40%);
827
- --rm-color-alerts-danger-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 48%);
828
- --rm-color-alerts-danger-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 52%);
829
- --rm-color-alerts-danger-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 64%);
830
- --rm-color-alerts-danger-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
831
- --rm-color-alerts-danger-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
832
- --rm-color-alerts-danger-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
833
- --rm-color-alerts-danger-minus-max: var(--rm-color-white);
834
- --rm-color-alerts-danger-on-plus-max: var(--rm-color-white);
835
- --rm-color-alerts-danger-on-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
836
- --rm-color-alerts-danger-on-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
837
- --rm-color-alerts-danger-on-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
838
- --rm-color-alerts-danger-on-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
839
- --rm-color-alerts-danger-on-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
840
- --rm-color-alerts-danger-on-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
841
- --rm-color-alerts-danger-on-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
842
- --rm-color-alerts-danger-on-plus-one: var(--rm-color-white);
843
- --rm-color-alerts-danger-on-base: var(--rm-color-white);
844
- --rm-color-alerts-danger-on-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
845
- --rm-color-alerts-danger-on-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
846
- --rm-color-alerts-danger-on-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 86%);
847
- --rm-color-alerts-danger-on-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%);
848
- --rm-color-alerts-danger-on-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
849
- --rm-color-alerts-danger-on-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
850
- --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
851
- --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
852
- --rm-color-alerts-danger-on-minus-max: var(--rm-color-black);
853
- --rm-color-alerts-info-plus-max: var(--rm-color-black);
854
- --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
855
- --rm-color-alerts-info-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
856
- --rm-color-alerts-info-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 12%);
857
- --rm-color-alerts-info-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 14%);
858
- --rm-color-alerts-info-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
859
- --rm-color-alerts-info-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
860
- --rm-color-alerts-info-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%);
861
- --rm-color-alerts-info-plus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 28%);
862
- --rm-color-alerts-info-base: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 32%);
863
- --rm-color-alerts-info-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 36%);
864
- --rm-color-alerts-info-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 40%);
865
- --rm-color-alerts-info-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 48%);
866
- --rm-color-alerts-info-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 52%);
867
- --rm-color-alerts-info-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 64%);
868
- --rm-color-alerts-info-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
869
- --rm-color-alerts-info-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
870
- --rm-color-alerts-info-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
871
- --rm-color-alerts-info-minus-max: var(--rm-color-white);
872
- --rm-color-alerts-info-on-plus-max: var(--rm-color-white);
873
- --rm-color-alerts-info-on-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
874
- --rm-color-alerts-info-on-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
875
- --rm-color-alerts-info-on-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
876
- --rm-color-alerts-info-on-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
877
- --rm-color-alerts-info-on-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
878
- --rm-color-alerts-info-on-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
879
- --rm-color-alerts-info-on-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
880
- --rm-color-alerts-info-on-plus-one: var(--rm-color-white);
881
- --rm-color-alerts-info-on-base: var(--rm-color-white);
882
- --rm-color-alerts-info-on-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
883
- --rm-color-alerts-info-on-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
884
- --rm-color-alerts-info-on-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 86%);
885
- --rm-color-alerts-info-on-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%);
886
- --rm-color-alerts-info-on-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
887
- --rm-color-alerts-info-on-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
888
- --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
889
- --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
890
- --rm-color-alerts-info-on-minus-max: var(--rm-color-black);
891
- --rm-color-alerts-notice-plus-max: var(--rm-color-black);
892
- --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
893
- --rm-color-alerts-notice-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
894
- --rm-color-alerts-notice-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 12%);
895
- --rm-color-alerts-notice-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 14%);
896
- --rm-color-alerts-notice-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
897
- --rm-color-alerts-notice-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
898
- --rm-color-alerts-notice-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%);
899
- --rm-color-alerts-notice-plus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 28%);
900
- --rm-color-alerts-notice-base: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 32%);
901
- --rm-color-alerts-notice-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 36%);
902
- --rm-color-alerts-notice-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 40%);
903
- --rm-color-alerts-notice-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 48%);
904
- --rm-color-alerts-notice-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 52%);
905
- --rm-color-alerts-notice-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 64%);
906
- --rm-color-alerts-notice-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
907
- --rm-color-alerts-notice-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
908
- --rm-color-alerts-notice-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
909
- --rm-color-alerts-notice-minus-max: var(--rm-color-white);
910
- --rm-color-alerts-notice-on-plus-max: var(--rm-color-white);
911
- --rm-color-alerts-notice-on-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
912
- --rm-color-alerts-notice-on-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
913
- --rm-color-alerts-notice-on-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
914
- --rm-color-alerts-notice-on-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
915
- --rm-color-alerts-notice-on-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
916
- --rm-color-alerts-notice-on-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
917
- --rm-color-alerts-notice-on-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
918
- --rm-color-alerts-notice-on-plus-one: var(--rm-color-white);
919
- --rm-color-alerts-notice-on-base: var(--rm-color-white);
920
- --rm-color-alerts-notice-on-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
921
- --rm-color-alerts-notice-on-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
922
- --rm-color-alerts-notice-on-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 86%);
923
- --rm-color-alerts-notice-on-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%);
924
- --rm-color-alerts-notice-on-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
925
- --rm-color-alerts-notice-on-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
926
- --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
927
- --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
928
- --rm-color-alerts-notice-on-minus-max: var(--rm-color-black);
929
- --rm-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
930
- --rm-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
931
- --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
932
- --rm-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
933
- --rm-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
934
- }
935
- :root[data-theme-mode=dark] .modal__content {
936
- background: var(--rm-color-neutral-plus-seven);
937
- color: var(--rm-color-neutral-on-plus-seven);
938
- }
939
- :root[data-theme-mode=dark] .modal__close:hover {
940
- background: var(--rm-color-background);
941
- }
942
- :root[data-theme-mode=dark] .panel {
943
- background: var(--rm-color-neutral-plus-seven);
944
- color: var(--rm-color-neutral-on-plus-seven);
945
- }
946
- :root[data-theme-mode=dark] .panel__close:hover {
947
- background: var(--rm-color-background);
1123
+ /**
1124
+ * @tokens Primary Dark Colors
1125
+ * @presenter Color
1126
+ */
1127
+ --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
1128
+ --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
1129
+ --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
1130
+ --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
1131
+ --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
1132
+ --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
1133
+ --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
1134
+ --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
1135
+ --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
1136
+ --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
1137
+ --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
1138
+ --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
1139
+ --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
1140
+ --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
1141
+ --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
1142
+ --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
1143
+ --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1144
+ --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
1145
+ --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
1146
+ --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
1147
+ --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
1148
+ --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
1149
+ --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
1150
+ --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1151
+ --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
1152
+ --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
1153
+ --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
1154
+ --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
1155
+ --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
1156
+ --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1157
+ --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
1158
+ --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
1159
+ --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1160
+ --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1161
+ --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
1162
+ --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
1163
+ --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1164
+ --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
1165
+ --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
1166
+ --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1167
+ --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
1168
+ --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1169
+ --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
1170
+ --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
1171
+ --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
1172
+ --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
1173
+ --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
1174
+ --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
1175
+ --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
1176
+ --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
1177
+ --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
1178
+ --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
1179
+ --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
1180
+ --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
1181
+ --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
1182
+ --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
1183
+ --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
1184
+ /**
1185
+ * @tokens Neutral Dark Colors
1186
+ * @presenter Color
1187
+ */
1188
+ --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
1189
+ --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
1190
+ --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
1191
+ --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
1192
+ --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
1193
+ --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
1194
+ --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
1195
+ --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
1196
+ --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
1197
+ --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
1198
+ --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
1199
+ --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
1200
+ --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
1201
+ --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
1202
+ --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
1203
+ --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1204
+ --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
1205
+ --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1206
+ --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1207
+ --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1208
+ --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
1209
+ --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1210
+ --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
1211
+ --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
1212
+ --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
1213
+ --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1214
+ --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
1215
+ --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1216
+ --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
1217
+ --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
1218
+ --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
1219
+ --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1220
+ --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
1221
+ --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
1222
+ --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
1223
+ --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1224
+ --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
1225
+ --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
1226
+ --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
1227
+ --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
1228
+ --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
1229
+ --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
1230
+ --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
1231
+ --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
1232
+ --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
1233
+ --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
1234
+ --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
1235
+ --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
1236
+ --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
1237
+ --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
1238
+ --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
1239
+ --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
1240
+ --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
1241
+ --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
1242
+ --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
1243
+ --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
1244
+ --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
1245
+ /**
1246
+ * @tokens Alerts Warning Dark Colors
1247
+ * @presenter Color
1248
+ */
1249
+ --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
1250
+ --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
1251
+ --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
1252
+ --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
1253
+ --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
1254
+ --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
1255
+ --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
1256
+ --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
1257
+ --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
1258
+ --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
1259
+ --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
1260
+ --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
1261
+ --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
1262
+ --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
1263
+ --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
1264
+ --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
1265
+ --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
1266
+ --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1267
+ --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
1268
+ --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1269
+ --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
1270
+ --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1271
+ --op-color-alerts-warning-on-plus-eight-alt: hsl(
1272
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
1273
+ );
1274
+ --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
1275
+ --op-color-alerts-warning-on-plus-seven-alt: hsl(
1276
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
1277
+ );
1278
+ --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
1279
+ --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
1280
+ --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
1281
+ --op-color-alerts-warning-on-plus-five-alt: hsl(
1282
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%
1283
+ );
1284
+ --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
1285
+ --op-color-alerts-warning-on-plus-four-alt: hsl(
1286
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%
1287
+ );
1288
+ --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1289
+ --op-color-alerts-warning-on-plus-three-alt: hsl(
1290
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
1291
+ );
1292
+ --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
1293
+ --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
1294
+ --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
1295
+ --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
1296
+ --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1297
+ --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
1298
+ --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1299
+ --op-color-alerts-warning-on-minus-one-alt: hsl(
1300
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%
1301
+ );
1302
+ --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1303
+ --op-color-alerts-warning-on-minus-two-alt: hsl(
1304
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%
1305
+ );
1306
+ --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
1307
+ --op-color-alerts-warning-on-minus-three-alt: hsl(
1308
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
1309
+ );
1310
+ --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
1311
+ --op-color-alerts-warning-on-minus-four-alt: hsl(
1312
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%
1313
+ );
1314
+ --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
1315
+ --op-color-alerts-warning-on-minus-five-alt: hsl(
1316
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%
1317
+ );
1318
+ --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
1319
+ --op-color-alerts-warning-on-minus-six-alt: hsl(
1320
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%
1321
+ );
1322
+ --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
1323
+ --op-color-alerts-warning-on-minus-seven-alt: hsl(
1324
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
1325
+ );
1326
+ --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
1327
+ --op-color-alerts-warning-on-minus-eight-alt: hsl(
1328
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%
1329
+ );
1330
+ --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
1331
+ --op-color-alerts-warning-on-minus-max-alt: hsl(
1332
+ var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%
1333
+ );
1334
+ /**
1335
+ * @tokens Alerts Danger Dark Colors
1336
+ * @presenter Color
1337
+ */
1338
+ --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
1339
+ --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
1340
+ --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
1341
+ --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
1342
+ --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
1343
+ --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
1344
+ --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
1345
+ --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
1346
+ --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
1347
+ --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
1348
+ --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
1349
+ --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
1350
+ --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
1351
+ --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
1352
+ --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
1353
+ --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
1354
+ --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
1355
+ --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1356
+ --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
1357
+ --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
1358
+ --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1359
+ --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1360
+ --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
1361
+ --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
1362
+ --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
1363
+ --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
1364
+ --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
1365
+ --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
1366
+ --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
1367
+ --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
1368
+ --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
1369
+ --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1370
+ --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
1371
+ --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1372
+ --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
1373
+ --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
1374
+ --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
1375
+ --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
1376
+ --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
1377
+ --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
1378
+ --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
1379
+ --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
1380
+ --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
1381
+ --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
1382
+ --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
1383
+ --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
1384
+ --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
1385
+ --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
1386
+ --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
1387
+ --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
1388
+ --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
1389
+ --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
1390
+ --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
1391
+ --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
1392
+ --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
1393
+ --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
1394
+ --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
1395
+ /**
1396
+ * @tokens Alerts Info Dark Colors
1397
+ * @presenter Color
1398
+ */
1399
+ --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
1400
+ --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1401
+ --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
1402
+ --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
1403
+ --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
1404
+ --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
1405
+ --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1406
+ --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
1407
+ --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1408
+ --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1409
+ --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
1410
+ --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
1411
+ --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
1412
+ --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
1413
+ --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
1414
+ --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1415
+ --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1416
+ --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1417
+ --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
1418
+ --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
1419
+ --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1420
+ --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1421
+ --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1422
+ --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1423
+ --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
1424
+ --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1425
+ --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1426
+ --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
1427
+ --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
1428
+ --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1429
+ --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
1430
+ --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1431
+ --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
1432
+ --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
1433
+ --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
1434
+ --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1435
+ --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1436
+ --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1437
+ --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
1438
+ --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1439
+ --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
1440
+ --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
1441
+ --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
1442
+ --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
1443
+ --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
1444
+ --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1445
+ --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
1446
+ --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
1447
+ --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
1448
+ --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1449
+ --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1450
+ --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1451
+ --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
1452
+ --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
1453
+ --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
1454
+ --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
1455
+ --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
1456
+ /**
1457
+ * @tokens Alerts Notice Dark Colors
1458
+ * @presenter Color
1459
+ */
1460
+ --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1461
+ --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
1462
+ --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
1463
+ --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
1464
+ --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
1465
+ --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1466
+ --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1467
+ --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1468
+ --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1469
+ --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
1470
+ --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
1471
+ --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
1472
+ --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
1473
+ --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
1474
+ --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
1475
+ --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1476
+ --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1477
+ --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1478
+ --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1479
+ --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
1480
+ --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1481
+ --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1482
+ --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
1483
+ --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
1484
+ --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1485
+ --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1486
+ --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1487
+ --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
1488
+ --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
1489
+ --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
1490
+ --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
1491
+ --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1492
+ --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
1493
+ --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1494
+ --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
1495
+ --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
1496
+ --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
1497
+ --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
1498
+ --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
1499
+ --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1500
+ --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
1501
+ --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1502
+ --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
1503
+ --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1504
+ --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
1505
+ --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1506
+ --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1507
+ --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
1508
+ --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
1509
+ --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1510
+ --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
1511
+ --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1512
+ --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
1513
+ --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
1514
+ --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
1515
+ --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
1516
+ --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
1517
+ /**
1518
+ * @tokens Dark Shadows
1519
+ * @presenter Shadow
1520
+ */
1521
+ --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1522
+ --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
1523
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
1524
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
1525
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
948
1526
  }
949
1527
 
950
1528
  html {
951
1529
  overflow: hidden;
952
- font-family: var(--rm-font-family);
1530
+ font-family: var(--op-font-family);
953
1531
  font-size: 62.5%;
954
1532
  }
955
1533
 
956
1534
  body {
957
1535
  overflow: auto;
958
1536
  height: 100vh;
959
- background: var(--rm-color-background);
960
- color: var(--rm-color-on-background);
961
- font-size: var(--rm-font-medium);
1537
+ background: var(--op-color-background);
1538
+ color: var(--op-color-on-background);
1539
+ font-size: var(--op-font-medium);
962
1540
  }
963
1541
 
964
1542
  button {
@@ -979,7 +1557,7 @@ label:hover {
979
1557
  }
980
1558
 
981
1559
  a {
982
- color: var(--rm-color-primary-original);
1560
+ color: var(--op-color-primary-original);
983
1561
  }
984
1562
 
985
1563
  blockquote,
@@ -1003,75 +1581,75 @@ h4,
1003
1581
  h5,
1004
1582
  h6 {
1005
1583
  margin-top: 0;
1006
- margin-bottom: var(--rm-space-small);
1007
- font-weight: var(--rm-font-weight-normal);
1584
+ margin-bottom: var(--op-space-small);
1585
+ font-weight: var(--op-font-weight-normal);
1008
1586
  }
1009
1587
 
1010
1588
  h1 {
1011
- font-size: var(--rm-font-2x-large);
1589
+ font-size: var(--op-font-3x-large);
1012
1590
  }
1013
1591
 
1014
1592
  h2 {
1015
- font-size: var(--rm-font-x-large);
1593
+ font-size: var(--op-font-2x-large);
1016
1594
  }
1017
1595
 
1018
1596
  h3 {
1019
- font-size: var(--rm-font-large);
1597
+ font-size: var(--op-font-large);
1020
1598
  }
1021
1599
 
1022
1600
  h4 {
1023
- font-size: var(--rm-font-medium);
1601
+ font-size: var(--op-font-medium);
1024
1602
  }
1025
1603
 
1026
1604
  h5 {
1027
- font-size: var(--rm-font-small);
1605
+ font-size: var(--op-font-small);
1028
1606
  }
1029
1607
 
1030
1608
  h6 {
1031
- font-size: var(--rm-font-x-small);
1609
+ font-size: var(--op-font-x-small);
1032
1610
  }
1033
1611
 
1034
1612
  p {
1035
- margin-bottom: var(--rm-space-small);
1036
- font-size: var(--rm-font-medium);
1613
+ margin-bottom: var(--op-space-small);
1614
+ font-size: var(--op-font-medium);
1037
1615
  }
1038
1616
 
1039
1617
  small {
1040
- font-size: var(--rm-font-small);
1618
+ font-size: var(--op-font-small);
1041
1619
  }
1042
1620
 
1043
- .app-wrapper {
1621
+ .app-with-sidebar {
1044
1622
  display: grid;
1045
1623
  width: 100%;
1046
1624
  height: 100vh;
1047
1625
  grid-template-columns: auto 1fr auto;
1048
1626
  }
1049
1627
 
1050
- .app__main {
1628
+ .app-body {
1051
1629
  display: flex;
1052
1630
  overflow: auto;
1053
1631
  flex-direction: column;
1054
1632
  }
1055
1633
 
1056
- .page__header {
1634
+ .app__header {
1057
1635
  position: sticky;
1058
- z-index: var(--rm-z-index-header);
1636
+ z-index: var(--op-z-index-header);
1059
1637
  top: 0;
1060
1638
  flex-grow: 0;
1061
1639
  flex-shrink: 0;
1062
1640
  }
1063
1641
 
1064
- .page__content {
1642
+ .app__content {
1065
1643
  width: 100%;
1066
1644
  max-width: 1024px;
1067
1645
  flex-grow: 1;
1068
- padding: 0 var(--rm-space-large);
1646
+ padding: 0 var(--op-space-large);
1069
1647
  margin: 0 auto;
1070
1648
  }
1071
1649
 
1072
- .page__footer {
1650
+ .app__footer {
1073
1651
  position: sticky;
1074
- z-index: var(--rm-z-index-footer);
1652
+ z-index: var(--op-z-index-footer);
1075
1653
  bottom: 0;
1076
1654
  flex-grow: 0;
1077
1655
  flex-shrink: 0;
@@ -1080,7 +1658,7 @@ small {
1080
1658
  .container {
1081
1659
  width: 100%;
1082
1660
  max-width: 1024px;
1083
- padding: 0 var(--rm-space-large);
1661
+ padding: 0 var(--op-space-large);
1084
1662
  margin: 0 auto;
1085
1663
  }
1086
1664
 
@@ -1089,11 +1667,11 @@ small {
1089
1667
  }
1090
1668
 
1091
1669
  .container--md-padding {
1092
- padding: 0 var(--rm-space-medium);
1670
+ padding: 0 var(--op-space-medium);
1093
1671
  }
1094
1672
 
1095
1673
  .container--sm-padding {
1096
- padding: 0 var(--rm-space-small);
1674
+ padding: 0 var(--op-space-small);
1097
1675
  }
1098
1676
 
1099
1677
  .container--xs {
@@ -1165,33 +1743,33 @@ small {
1165
1743
  }
1166
1744
 
1167
1745
  .gap-xxs {
1168
- gap: var(--rm-space-2x-small);
1169
- --rm-gap: var(--rm-space-2x-small);
1746
+ gap: var(--op-space-2x-small);
1747
+ --op-gap: var(--op-space-2x-small);
1170
1748
  }
1171
1749
 
1172
1750
  .gap-xs {
1173
- gap: var(--rm-space-x-small);
1174
- --rm-gap: var(--rm-space-x-small);
1751
+ gap: var(--op-space-x-small);
1752
+ --op-gap: var(--op-space-x-small);
1175
1753
  }
1176
1754
 
1177
1755
  .gap-sm {
1178
- gap: var(--rm-space-small);
1179
- --rm-gap: var(--rm-space-small);
1756
+ gap: var(--op-space-small);
1757
+ --op-gap: var(--op-space-small);
1180
1758
  }
1181
1759
 
1182
1760
  .gap-md {
1183
- gap: var(--rm-space-medium);
1184
- --rm-gap: var(--rm-space-medium);
1761
+ gap: var(--op-space-medium);
1762
+ --op-gap: var(--op-space-medium);
1185
1763
  }
1186
1764
 
1187
1765
  .gap-lg {
1188
- gap: var(--rm-space-large);
1189
- --rm-gap: var(--rm-space-large);
1766
+ gap: var(--op-space-large);
1767
+ --op-gap: var(--op-space-large);
1190
1768
  }
1191
1769
 
1192
1770
  .gap-xl {
1193
- gap: var(--rm-space-x-large);
1194
- --rm-gap: var(--rm-space-x-large);
1771
+ gap: var(--op-space-x-large);
1772
+ --op-gap: var(--op-space-x-large);
1195
1773
  }
1196
1774
 
1197
1775
  .justify-start {
@@ -1254,6 +1832,10 @@ small {
1254
1832
  align-self: stretch;
1255
1833
  }
1256
1834
 
1835
+ .self-baseline {
1836
+ align-self: baseline;
1837
+ }
1838
+
1257
1839
  .text-left {
1258
1840
  text-align: left;
1259
1841
  }
@@ -1271,23 +1853,23 @@ small {
1271
1853
  }
1272
1854
 
1273
1855
  .margin-xl {
1274
- margin: var(--rm-space-x-large);
1856
+ margin: var(--op-space-x-large);
1275
1857
  }
1276
1858
 
1277
1859
  .margin-lg {
1278
- margin: var(--rm-space-large);
1860
+ margin: var(--op-space-large);
1279
1861
  }
1280
1862
 
1281
1863
  .margin-md {
1282
- margin: var(--rm-space-medium);
1864
+ margin: var(--op-space-medium);
1283
1865
  }
1284
1866
 
1285
1867
  .margin-sm {
1286
- margin: var(--rm-space-small);
1868
+ margin: var(--op-space-small);
1287
1869
  }
1288
1870
 
1289
1871
  .margin-xs {
1290
- margin: var(--rm-space-x-small);
1872
+ margin: var(--op-space-x-small);
1291
1873
  }
1292
1874
 
1293
1875
  .margin-none {
@@ -1299,28 +1881,28 @@ small {
1299
1881
  }
1300
1882
 
1301
1883
  .margin-y-xl {
1302
- margin-top: var(--rm-space-x-large);
1303
- margin-bottom: var(--rm-space-x-large);
1884
+ margin-top: var(--op-space-x-large);
1885
+ margin-bottom: var(--op-space-x-large);
1304
1886
  }
1305
1887
 
1306
1888
  .margin-y-lg {
1307
- margin-top: var(--rm-space-large);
1308
- margin-bottom: var(--rm-space-large);
1889
+ margin-top: var(--op-space-large);
1890
+ margin-bottom: var(--op-space-large);
1309
1891
  }
1310
1892
 
1311
1893
  .margin-y-md {
1312
- margin-top: var(--rm-space-medium);
1313
- margin-bottom: var(--rm-space-medium);
1894
+ margin-top: var(--op-space-medium);
1895
+ margin-bottom: var(--op-space-medium);
1314
1896
  }
1315
1897
 
1316
1898
  .margin-y-sm {
1317
- margin-top: var(--rm-space-small);
1318
- margin-bottom: var(--rm-space-small);
1899
+ margin-top: var(--op-space-small);
1900
+ margin-bottom: var(--op-space-small);
1319
1901
  }
1320
1902
 
1321
1903
  .margin-y-xs {
1322
- margin-top: var(--rm-space-x-small);
1323
- margin-bottom: var(--rm-space-x-small);
1904
+ margin-top: var(--op-space-x-small);
1905
+ margin-bottom: var(--op-space-x-small);
1324
1906
  }
1325
1907
 
1326
1908
  .margin-y-none {
@@ -1329,28 +1911,28 @@ small {
1329
1911
  }
1330
1912
 
1331
1913
  .margin-x-xl {
1332
- margin-right: var(--rm-space-x-large);
1333
- margin-left: var(--rm-space-x-large);
1914
+ margin-right: var(--op-space-x-large);
1915
+ margin-left: var(--op-space-x-large);
1334
1916
  }
1335
1917
 
1336
1918
  .margin-x-lg {
1337
- margin-right: var(--rm-space-large);
1338
- margin-left: var(--rm-space-large);
1919
+ margin-right: var(--op-space-large);
1920
+ margin-left: var(--op-space-large);
1339
1921
  }
1340
1922
 
1341
1923
  .margin-x-md {
1342
- margin-right: var(--rm-space-medium);
1343
- margin-left: var(--rm-space-medium);
1924
+ margin-right: var(--op-space-medium);
1925
+ margin-left: var(--op-space-medium);
1344
1926
  }
1345
1927
 
1346
1928
  .margin-x-sm {
1347
- margin-right: var(--rm-space-small);
1348
- margin-left: var(--rm-space-small);
1929
+ margin-right: var(--op-space-small);
1930
+ margin-left: var(--op-space-small);
1349
1931
  }
1350
1932
 
1351
1933
  .margin-x-xs {
1352
- margin-right: var(--rm-space-x-small);
1353
- margin-left: var(--rm-space-x-small);
1934
+ margin-right: var(--op-space-x-small);
1935
+ margin-left: var(--op-space-x-small);
1354
1936
  }
1355
1937
 
1356
1938
  .margin-x-none {
@@ -1359,23 +1941,23 @@ small {
1359
1941
  }
1360
1942
 
1361
1943
  .margin-top-xl {
1362
- margin-top: var(--rm-space-x-large);
1944
+ margin-top: var(--op-space-x-large);
1363
1945
  }
1364
1946
 
1365
1947
  .margin-top-lg {
1366
- margin-top: var(--rm-space-large);
1948
+ margin-top: var(--op-space-large);
1367
1949
  }
1368
1950
 
1369
1951
  .margin-top-md {
1370
- margin-top: var(--rm-space-medium);
1952
+ margin-top: var(--op-space-medium);
1371
1953
  }
1372
1954
 
1373
1955
  .margin-top-sm {
1374
- margin-top: var(--rm-space-small);
1956
+ margin-top: var(--op-space-small);
1375
1957
  }
1376
1958
 
1377
1959
  .margin-top-xs {
1378
- margin-top: var(--rm-space-x-small);
1960
+ margin-top: var(--op-space-x-small);
1379
1961
  }
1380
1962
 
1381
1963
  .margin-top-none {
@@ -1383,23 +1965,23 @@ small {
1383
1965
  }
1384
1966
 
1385
1967
  .margin-bottom-xl {
1386
- margin-bottom: var(--rm-space-x-large);
1968
+ margin-bottom: var(--op-space-x-large);
1387
1969
  }
1388
1970
 
1389
1971
  .margin-bottom-lg {
1390
- margin-bottom: var(--rm-space-large);
1972
+ margin-bottom: var(--op-space-large);
1391
1973
  }
1392
1974
 
1393
1975
  .margin-bottom-md {
1394
- margin-bottom: var(--rm-space-medium);
1976
+ margin-bottom: var(--op-space-medium);
1395
1977
  }
1396
1978
 
1397
1979
  .margin-bottom-sm {
1398
- margin-bottom: var(--rm-space-small);
1980
+ margin-bottom: var(--op-space-small);
1399
1981
  }
1400
1982
 
1401
1983
  .margin-bottom-xs {
1402
- margin-bottom: var(--rm-space-x-small);
1984
+ margin-bottom: var(--op-space-x-small);
1403
1985
  }
1404
1986
 
1405
1987
  .margin-bottom-none {
@@ -1407,23 +1989,23 @@ small {
1407
1989
  }
1408
1990
 
1409
1991
  .margin-right-xl {
1410
- margin-right: var(--rm-space-x-large);
1992
+ margin-right: var(--op-space-x-large);
1411
1993
  }
1412
1994
 
1413
1995
  .margin-right-lg {
1414
- margin-right: var(--rm-space-large);
1996
+ margin-right: var(--op-space-large);
1415
1997
  }
1416
1998
 
1417
1999
  .margin-right-md {
1418
- margin-right: var(--rm-space-medium);
2000
+ margin-right: var(--op-space-medium);
1419
2001
  }
1420
2002
 
1421
2003
  .margin-right-sm {
1422
- margin-right: var(--rm-space-small);
2004
+ margin-right: var(--op-space-small);
1423
2005
  }
1424
2006
 
1425
2007
  .margin-right-xs {
1426
- margin-right: var(--rm-space-x-small);
2008
+ margin-right: var(--op-space-x-small);
1427
2009
  }
1428
2010
 
1429
2011
  .margin-right-none {
@@ -1431,23 +2013,23 @@ small {
1431
2013
  }
1432
2014
 
1433
2015
  .margin-left-xl {
1434
- margin-left: var(--rm-space-x-large);
2016
+ margin-left: var(--op-space-x-large);
1435
2017
  }
1436
2018
 
1437
2019
  .margin-left-lg {
1438
- margin-left: var(--rm-space-large);
2020
+ margin-left: var(--op-space-large);
1439
2021
  }
1440
2022
 
1441
2023
  .margin-left-md {
1442
- margin-left: var(--rm-space-medium);
2024
+ margin-left: var(--op-space-medium);
1443
2025
  }
1444
2026
 
1445
2027
  .margin-left-sm {
1446
- margin-left: var(--rm-space-small);
2028
+ margin-left: var(--op-space-small);
1447
2029
  }
1448
2030
 
1449
2031
  .margin-left-xs {
1450
- margin-left: var(--rm-space-x-small);
2032
+ margin-left: var(--op-space-x-small);
1451
2033
  }
1452
2034
 
1453
2035
  .margin-left-none {
@@ -1471,34 +2053,34 @@ small {
1471
2053
  flex: 1;
1472
2054
  }
1473
2055
  .flexible-layout-area > *.four-fifths-width {
1474
- flex-basis: calc(80% - var(--rm-gap));
2056
+ flex-basis: calc(80% - var(--op-gap));
1475
2057
  }
1476
2058
  .flexible-layout-area > *.three-fifths-width {
1477
- flex-basis: calc(60% - var(--rm-gap));
2059
+ flex-basis: calc(60% - var(--op-gap));
1478
2060
  }
1479
2061
  .flexible-layout-area > *.two-fifths-width {
1480
- flex-basis: calc(40% - var(--rm-gap));
2062
+ flex-basis: calc(40% - var(--op-gap));
1481
2063
  }
1482
2064
  .flexible-layout-area > *.one-fifth-width {
1483
- flex-basis: calc(20% - var(--rm-gap));
2065
+ flex-basis: calc(20% - var(--op-gap));
1484
2066
  }
1485
2067
  .flexible-layout-area > *.three-quarters-width {
1486
- flex-basis: calc(75% - var(--rm-gap));
2068
+ flex-basis: calc(75% - var(--op-gap));
1487
2069
  }
1488
2070
  .flexible-layout-area > *.one-quarter-width {
1489
- flex-basis: calc(25% - var(--rm-gap));
2071
+ flex-basis: calc(25% - var(--op-gap));
1490
2072
  }
1491
2073
  .flexible-layout-area > *.two-thirds-width {
1492
- flex-basis: calc(66.6666666667% - var(--rm-gap));
2074
+ flex-basis: calc(66.6666666667% - var(--op-gap));
1493
2075
  }
1494
2076
  .flexible-layout-area > *.one-third-width {
1495
- flex-basis: calc(33.3333333333% - var(--rm-gap));
2077
+ flex-basis: calc(33.3333333333% - var(--op-gap));
1496
2078
  }
1497
2079
  .flexible-layout-area > *.full-width {
1498
- flex-basis: calc(100% - var(--rm-gap));
2080
+ flex-basis: calc(100% - var(--op-gap));
1499
2081
  }
1500
2082
  .flexible-layout-area > *.half-width {
1501
- flex-basis: calc(50% - var(--rm-gap));
2083
+ flex-basis: calc(50% - var(--op-gap));
1502
2084
  }
1503
2085
  @media screen and (max-width: 768px) {
1504
2086
  .flexible-layout-area:not(.flex-no-wrap) {
@@ -1513,146 +2095,146 @@ small {
1513
2095
  .alert-notice, .alert-info, .alert-danger, .alert-warning {
1514
2096
  display: flex;
1515
2097
  align-items: flex-start;
1516
- padding: var(--rm-space-x-small) var(--rm-space-medium);
1517
- border-radius: var(--rm-radius-medium);
1518
- gap: var(--rm-space-small);
2098
+ padding: var(--op-space-x-small) var(--op-space-medium);
2099
+ border-radius: var(--op-radius-medium);
2100
+ gap: var(--op-space-small);
1519
2101
  }
1520
2102
  .alert-notice .alert__icon, .alert-info .alert__icon, .alert-danger .alert__icon, .alert-warning .alert__icon {
1521
2103
  /* stylelint-disable scss/at-extend-no-missing-placeholder */
1522
2104
  /* stylelint-enable scss/at-extend-no-missing-placeholder */
1523
- line-height: var(--rm-line-height-dense);
2105
+ line-height: var(--op-line-height-dense);
1524
2106
  }
1525
2107
  .alert-notice .alert__messages, .alert-info .alert__messages, .alert-danger .alert__messages, .alert-warning .alert__messages {
1526
2108
  display: flex;
1527
2109
  flex: 1;
1528
2110
  flex-direction: column;
1529
- gap: var(--rm-space-2x-small);
2111
+ gap: var(--op-space-2x-small);
1530
2112
  }
1531
2113
  .alert-notice .alert__title, .alert-info .alert__title, .alert-danger .alert__title, .alert-warning .alert__title {
1532
- font-size: var(--rm-font-medium);
1533
- font-weight: var(--rm-font-weight-medium);
2114
+ font-size: var(--op-font-medium);
2115
+ font-weight: var(--op-font-weight-medium);
1534
2116
  }
1535
2117
  .alert-notice .alert__description, .alert-info .alert__description, .alert-danger .alert__description, .alert-warning .alert__description {
1536
- font-size: var(--rm-font-small);
2118
+ font-size: var(--op-font-small);
1537
2119
  }
1538
2120
 
1539
2121
  .alert-warning {
1540
- background-color: var(--rm-color-alerts-warning-base);
1541
- color: var(--rm-color-alerts-warning-on-base);
2122
+ background-color: var(--op-color-alerts-warning-base);
2123
+ color: var(--op-color-alerts-warning-on-base);
1542
2124
  }
1543
2125
  .alert-warning .alert__title {
1544
- color: var(--rm-color-alerts-warning-on-plus-one);
2126
+ color: var(--op-color-alerts-warning-on-plus-one);
1545
2127
  }
1546
2128
  .alert-warning.alert--muted {
1547
- background-color: var(--rm-color-alerts-warning-plus-five);
1548
- color: var(--rm-color-alerts-warning-on-plus-five);
2129
+ background-color: var(--op-color-alerts-warning-plus-five);
2130
+ color: var(--op-color-alerts-warning-on-plus-five);
1549
2131
  }
1550
2132
  .alert-warning.alert--muted .alert__title {
1551
- color: var(--rm-color-alerts-warning-on-plus-six);
2133
+ color: var(--op-color-alerts-warning-on-plus-six);
1552
2134
  }
1553
2135
  .alert-warning.alert--outlined {
1554
- background-color: var(--rm-color-alerts-warning-plus-eight);
1555
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-warning-base);
1556
- color: var(--rm-color-alerts-warning-on-plus-five);
2136
+ background-color: var(--op-color-alerts-warning-plus-eight);
2137
+ box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
2138
+ color: var(--op-color-alerts-warning-on-plus-five);
1557
2139
  }
1558
2140
  .alert-warning.alert--outlined .alert__title {
1559
- color: var(--rm-color-alerts-warning-on-plus-four);
2141
+ color: var(--op-color-alerts-warning-on-plus-four);
1560
2142
  }
1561
2143
 
1562
2144
  .alert-danger {
1563
- background-color: var(--rm-color-alerts-danger-base);
1564
- color: var(--rm-color-alerts-danger-on-base);
2145
+ background-color: var(--op-color-alerts-danger-base);
2146
+ color: var(--op-color-alerts-danger-on-base);
1565
2147
  /* stylelint-disable no-descending-specificity */
1566
2148
  /* stylelint-enable no-descending-specificity */
1567
2149
  }
1568
2150
  .alert-danger .alert__title {
1569
- color: var(--rm-color-alerts-danger-on-plus-one);
2151
+ color: var(--op-color-alerts-danger-on-plus-one);
1570
2152
  }
1571
2153
  .alert-danger.alert--muted {
1572
- background-color: var(--rm-color-alerts-danger-plus-five);
1573
- color: var(--rm-color-alerts-danger-on-plus-five);
2154
+ background-color: var(--op-color-alerts-danger-plus-five);
2155
+ color: var(--op-color-alerts-danger-on-plus-five);
1574
2156
  }
1575
2157
  .alert-danger.alert--muted .alert__title {
1576
- color: var(--rm-color-alerts-danger-on-plus-six);
2158
+ color: var(--op-color-alerts-danger-on-plus-six);
1577
2159
  }
1578
2160
  .alert-danger.alert--outlined {
1579
- background-color: var(--rm-color-alerts-danger-plus-eight);
1580
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-base);
1581
- color: var(--rm-color-alerts-danger-on-plus-five);
2161
+ background-color: var(--op-color-alerts-danger-plus-eight);
2162
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
2163
+ color: var(--op-color-alerts-danger-on-plus-five);
1582
2164
  }
1583
2165
  .alert-danger.alert--outlined .alert__title {
1584
- color: var(--rm-color-alerts-danger-on-plus-four);
2166
+ color: var(--op-color-alerts-danger-on-plus-four);
1585
2167
  }
1586
2168
 
1587
2169
  .alert-info {
1588
- background-color: var(--rm-color-alerts-info-base);
1589
- color: var(--rm-color-alerts-info-on-base);
2170
+ background-color: var(--op-color-alerts-info-base);
2171
+ color: var(--op-color-alerts-info-on-base);
1590
2172
  /* stylelint-disable no-descending-specificity */
1591
2173
  /* stylelint-enable no-descending-specificity */
1592
2174
  }
1593
2175
  .alert-info .alert__title {
1594
- color: var(--rm-color-alerts-info-on-plus-one);
2176
+ color: var(--op-color-alerts-info-on-plus-one);
1595
2177
  }
1596
2178
  .alert-info.alert--muted {
1597
- background-color: var(--rm-color-alerts-info-plus-five);
1598
- color: var(--rm-color-alerts-info-on-plus-five);
2179
+ background-color: var(--op-color-alerts-info-plus-five);
2180
+ color: var(--op-color-alerts-info-on-plus-five);
1599
2181
  }
1600
2182
  .alert-info.alert--muted .alert__title {
1601
- color: var(--rm-color-alerts-info-on-plus-six);
2183
+ color: var(--op-color-alerts-info-on-plus-six);
1602
2184
  }
1603
2185
  .alert-info.alert--outlined {
1604
- background-color: var(--rm-color-alerts-info-plus-eight);
1605
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-info-base);
1606
- color: var(--rm-color-alerts-info-on-plus-five);
2186
+ background-color: var(--op-color-alerts-info-plus-eight);
2187
+ box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
2188
+ color: var(--op-color-alerts-info-on-plus-five);
1607
2189
  }
1608
2190
  .alert-info.alert--outlined .alert__title {
1609
- color: var(--rm-color-alerts-info-on-plus-four);
2191
+ color: var(--op-color-alerts-info-on-plus-four);
1610
2192
  }
1611
2193
 
1612
2194
  .alert-notice {
1613
- background-color: var(--rm-color-alerts-notice-base);
1614
- color: var(--rm-color-alerts-notice-on-base);
2195
+ background-color: var(--op-color-alerts-notice-base);
2196
+ color: var(--op-color-alerts-notice-on-base);
1615
2197
  /* stylelint-disable no-descending-specificity */
1616
2198
  /* stylelint-enable no-descending-specificity */
1617
2199
  }
1618
2200
  .alert-notice .alert__title {
1619
- color: var(--rm-color-alerts-notice-on-plus-one);
2201
+ color: var(--op-color-alerts-notice-on-plus-one);
1620
2202
  }
1621
2203
  .alert-notice.alert--muted {
1622
- background-color: var(--rm-color-alerts-notice-plus-five);
1623
- color: var(--rm-color-alerts-notice-on-plus-five);
2204
+ background-color: var(--op-color-alerts-notice-plus-five);
2205
+ color: var(--op-color-alerts-notice-on-plus-five);
1624
2206
  }
1625
2207
  .alert-notice.alert--muted .alert__title {
1626
- color: var(--rm-color-alerts-notice-on-plus-six);
2208
+ color: var(--op-color-alerts-notice-on-plus-six);
1627
2209
  }
1628
2210
  .alert-notice.alert--outlined {
1629
- background-color: var(--rm-color-alerts-notice-plus-eight);
1630
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-notice-base);
1631
- color: var(--rm-color-alerts-notice-on-plus-five);
2211
+ background-color: var(--op-color-alerts-notice-plus-eight);
2212
+ box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
2213
+ color: var(--op-color-alerts-notice-on-plus-five);
1632
2214
  }
1633
2215
  .alert-notice.alert--outlined .alert__title {
1634
- color: var(--rm-color-alerts-notice-on-plus-four);
2216
+ color: var(--op-color-alerts-notice-on-plus-four);
1635
2217
  }
1636
2218
 
1637
2219
  .badge-notice, .badge-info, .badge-danger, .badge-warning, .badge-primary, .badge {
1638
2220
  display: inline-flex;
1639
2221
  align-items: center;
1640
2222
  justify-content: center;
1641
- padding: var(--rm-space-2x-small) var(--rm-space-x-small);
1642
- border-radius: var(--rm-radius-medium);
1643
- background-color: var(--rm-color-neutral-base);
1644
- color: var(--rm-color-neutral-on-base);
2223
+ padding: var(--op-space-2x-small) var(--op-space-x-small);
2224
+ border-radius: var(--op-radius-medium);
2225
+ background-color: var(--op-color-neutral-base);
2226
+ color: var(--op-color-neutral-on-base);
1645
2227
  cursor: inherit;
1646
- font-size: var(--rm-font-x-small);
1647
- font-weight: var(--rm-font-weight-semi-bold);
1648
- gap: var(--rm-space-3x-small);
1649
- letter-spacing: var(--rm-letter-spacing-label);
1650
- line-height: var(--rm-line-height-densest);
2228
+ font-size: var(--op-font-x-small);
2229
+ font-weight: var(--op-font-weight-semi-bold);
2230
+ gap: var(--op-space-3x-small);
2231
+ letter-spacing: var(--op-letter-spacing-label);
2232
+ line-height: var(--op-line-height-densest);
1651
2233
  user-select: none;
1652
2234
  white-space: nowrap;
1653
2235
  }
1654
2236
  .badge--pill.badge-notice, .badge--pill.badge-info, .badge--pill.badge-danger, .badge--pill.badge-warning, .badge--pill.badge-primary, .badge--pill.badge {
1655
- border-radius: var(--rm-radius-pill);
2237
+ border-radius: var(--op-radius-pill);
1656
2238
  }
1657
2239
  .badge--notification-right.badge-notice, .badge--notification-right.badge-info, .badge--notification-right.badge-danger, .badge--notification-right.badge-warning, .badge--notification-right.badge-primary, .badge--notification-right.badge {
1658
2240
  position: absolute;
@@ -1670,80 +2252,80 @@ small {
1670
2252
  }
1671
2253
 
1672
2254
  .badge-primary {
1673
- background-color: var(--rm-color-primary-base);
1674
- color: var(--rm-color-primary-on-base);
2255
+ background-color: var(--op-color-primary-base);
2256
+ color: var(--op-color-primary-on-base);
1675
2257
  }
1676
2258
 
1677
2259
  .badge-warning {
1678
- background-color: var(--rm-color-alerts-warning-base);
1679
- color: var(--rm-color-alerts-warning-on-base);
2260
+ background-color: var(--op-color-alerts-warning-base);
2261
+ color: var(--op-color-alerts-warning-on-base);
1680
2262
  }
1681
2263
 
1682
2264
  .badge-danger {
1683
- background-color: var(--rm-color-alerts-danger-base);
1684
- color: var(--rm-color-alerts-danger-on-base);
2265
+ background-color: var(--op-color-alerts-danger-base);
2266
+ color: var(--op-color-alerts-danger-on-base);
1685
2267
  }
1686
2268
 
1687
2269
  .badge-info {
1688
- background-color: var(--rm-color-alerts-info-base);
1689
- color: var(--rm-color-alerts-info-on-base);
2270
+ background-color: var(--op-color-alerts-info-base);
2271
+ color: var(--op-color-alerts-info-on-base);
1690
2272
  }
1691
2273
 
1692
2274
  .badge-notice {
1693
- background-color: var(--rm-color-alerts-notice-base);
1694
- color: var(--rm-color-alerts-notice-on-base);
2275
+ background-color: var(--op-color-alerts-notice-base);
2276
+ color: var(--op-color-alerts-notice-on-base);
1695
2277
  }
1696
2278
 
1697
2279
  .btn--outline.btn-delete:focus, .btn--outline.btn-secondary:focus, .btn--outline.btn-primary:focus, .btn--outline.btn:focus, .btn--outline.btn-delete:focus-within, .btn--outline.btn-secondary:focus-within, .btn--outline.btn-primary:focus-within, .btn--outline.btn:focus-within, .btn--outline.btn-delete:focus-visible, .btn--outline.btn-secondary:focus-visible, .btn--outline.btn-primary:focus-visible, .btn--outline.btn:focus-visible, .btn--no-border.btn-delete:focus, .btn--no-border.btn-secondary:focus, .btn--no-border.btn-primary:focus, .btn--no-border.btn:focus, .btn--no-border.btn-delete:focus-within, .btn--no-border.btn-secondary:focus-within, .btn--no-border.btn-primary:focus-within, .btn--no-border.btn:focus-within, .btn--no-border.btn-delete:focus-visible, .btn--no-border.btn-secondary:focus-visible, .btn--no-border.btn-primary:focus-visible, .btn--no-border.btn:focus-visible, .btn-delete:focus, .btn-secondary:focus, .btn-primary:focus, .btn:focus, .btn-delete:focus-within, .btn-secondary:focus-within, .btn-primary:focus-within, .btn:focus-within, .btn-delete:focus-visible, .btn-secondary:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
1698
- box-shadow: var(--rm-input-focus);
2280
+ box-shadow: var(--op-input-focus);
1699
2281
  outline: none;
1700
2282
  }
1701
2283
 
1702
2284
  .btn-delete, .btn-secondary, .btn-primary, .btn {
1703
- --_rm-btn-height-small: var(--rm-input-height-small);
1704
- --_rm-btn-height-medium: var(--rm-input-height-medium);
1705
- --_rm-btn-height-large: var(--rm-input-height-large);
1706
- --_rm-font-small: var(--rm-font-x-small);
1707
- --_rm-font-medium: var(--rm-font-small);
1708
- --_rm-font-large: var(--rm-font-medium);
1709
- --__rm-btn-height: var(--_rm-btn-height-medium);
1710
- --__rm-btn-font-size: var(--_rm-font-medium);
2285
+ --_op-btn-height-small: var(--op-input-height-small);
2286
+ --_op-btn-height-medium: var(--op-input-height-medium);
2287
+ --_op-btn-height-large: var(--op-input-height-large);
2288
+ --_op-btn-font-small: var(--op-font-x-small);
2289
+ --_op-btn-font-medium: var(--op-font-small);
2290
+ --_op-btn-font-large: var(--op-font-medium);
2291
+ --__op-btn-height: var(--_op-btn-height-medium);
2292
+ --__op-btn-font-size: var(--_op-btn-font-medium);
1711
2293
  display: inline-flex;
1712
- height: var(--__rm-btn-height);
2294
+ height: var(--__op-btn-height);
1713
2295
  align-items: center;
1714
2296
  justify-content: center;
1715
- padding: 0 var(--rm-space-medium);
1716
- border-radius: var(--rm-radius-large);
2297
+ padding: 0 var(--op-space-medium);
2298
+ border-radius: var(--op-radius-large);
1717
2299
  appearance: none;
1718
2300
  cursor: pointer;
1719
- font-size: var(--__rm-btn-font-size);
1720
- font-weight: var(--rm-font-weight-medium);
1721
- gap: var(--rm-space-x-small);
2301
+ font-size: var(--__op-btn-font-size);
2302
+ font-weight: var(--op-font-weight-medium);
2303
+ gap: var(--op-space-x-small);
1722
2304
  text-align: center;
1723
2305
  text-decoration: none;
1724
- transition: all var(--rm-transition-input);
2306
+ transition: var(--op-transition-input);
1725
2307
  white-space: nowrap;
1726
2308
  }
1727
2309
  .btn--pill.btn-delete, .btn--pill.btn-secondary, .btn--pill.btn-primary, .btn--pill.btn {
1728
- border-radius: var(--rm-radius-pill);
2310
+ border-radius: var(--op-radius-pill);
1729
2311
  }
1730
2312
  .btn--icon.btn-delete, .btn--icon.btn-secondary, .btn--icon.btn-primary, .btn--icon.btn {
1731
- width: var(--__rm-btn-height);
1732
- min-width: var(--__rm-btn-height);
2313
+ width: var(--__op-btn-height);
2314
+ min-width: var(--__op-btn-height);
1733
2315
  padding: 0;
1734
- border-radius: var(--rm-radius-circle);
2316
+ border-radius: var(--op-radius-circle);
1735
2317
  }
1736
2318
  .btn--small.btn-delete, .btn--small.btn-secondary, .btn--small.btn-primary, .btn--small.btn {
1737
- --__rm-btn-height: var(--_rm-btn-height-small);
1738
- --__rm-btn-font-size: var(--_rm-font-small);
2319
+ --__op-btn-height: var(--_op-btn-height-small);
2320
+ --__op-btn-font-size: var(--_op-btn-font-small);
1739
2321
  }
1740
2322
  .btn--medium.btn-delete, .btn--medium.btn-secondary, .btn--medium.btn-primary, .btn--medium.btn {
1741
- --__rm-btn-height: var(--_rm-btn-height-medium);
1742
- --__rm-btn-font-size: var(--_rm-font-medium);
2323
+ --__op-btn-height: var(--_op-btn-height-medium);
2324
+ --__op-btn-font-size: var(--_op-btn-font-medium);
1743
2325
  }
1744
2326
  .btn--large.btn-delete, .btn--large.btn-secondary, .btn--large.btn-primary, .btn--large.btn {
1745
- --__rm-btn-height: var(--_rm-btn-height-large);
1746
- --__rm-btn-font-size: var(--_rm-font-large);
2327
+ --__op-btn-height: var(--_op-btn-height-large);
2328
+ --__op-btn-font-size: var(--_op-btn-font-large);
1747
2329
  }
1748
2330
  .btn--disabled.btn-delete, .btn--disabled.btn-secondary, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-delete:disabled, .btn-secondary:disabled, .btn-primary:disabled, .btn:disabled {
1749
2331
  cursor: not-allowed;
@@ -1754,113 +2336,113 @@ small {
1754
2336
  }
1755
2337
  @media (max-width: 768px) {
1756
2338
  .btn-delete, .btn-secondary, .btn-primary, .btn {
1757
- --__rm-btn-height: var(--_rm-btn-height-large);
1758
- --__rm-btn-font-size: var(--_rm-font-large);
2339
+ --__op-btn-height: var(--_op-btn-height-large);
2340
+ --__op-btn-font-size: var(--_op-btn-font-large);
1759
2341
  }
1760
2342
  .btn--small.btn-delete, .btn--small.btn-secondary, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-delete, .btn--medium.btn-secondary, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-delete, .btn--large.btn-secondary, .btn--large.btn-primary, .btn--large.btn {
1761
- --__rm-btn-height: var(--_rm-btn-height-large);
1762
- --__rm-btn-font-size: var(--_rm-font-large);
2343
+ --__op-btn-height: var(--_op-btn-height-large);
2344
+ --__op-btn-font-size: var(--_op-btn-font-large);
1763
2345
  }
1764
2346
  }
1765
2347
 
1766
2348
  .btn {
1767
2349
  background-color: transparent;
1768
- box-shadow: var(--rm-border-all) var(--rm-border-color);
1769
- color: var(--rm-color-neutral-minus-max);
2350
+ box-shadow: var(--op-border-all) var(--op-border-color);
2351
+ color: var(--op-color-neutral-minus-max);
1770
2352
  }
1771
2353
  .btn:not(:disabled, .btn--disabled):hover {
1772
- background-color: var(--rm-color-neutral-plus-seven);
1773
- color: var(--rm-color-neutral-on-plus-seven);
2354
+ background-color: var(--op-color-neutral-plus-seven);
2355
+ color: var(--op-color-neutral-on-plus-seven);
1774
2356
  }
1775
2357
  .btn.btn--no-border {
1776
- box-shadow: var(--rm-border-all) transparent;
2358
+ box-shadow: var(--op-border-all) transparent;
1777
2359
  }
1778
2360
  .btn.btn--no-border:not(:disabled, .btn--disabled):hover {
1779
2361
  background-color: transparent;
1780
- color: var(--rm-color-neutral-minus-three);
2362
+ color: var(--op-color-neutral-minus-three);
1781
2363
  }
1782
2364
 
1783
2365
  .btn-primary {
1784
- background-color: var(--rm-color-primary-base);
1785
- box-shadow: var(--rm-border-all) var(--rm-color-primary-base);
1786
- color: var(--rm-color-primary-on-base);
2366
+ background-color: var(--op-color-primary-base);
2367
+ box-shadow: var(--op-border-all) var(--op-color-primary-base);
2368
+ color: var(--op-color-primary-on-base);
1787
2369
  }
1788
2370
  .btn-primary:not(:disabled, .btn--disabled):hover {
1789
- background-color: var(--rm-color-primary-plus-one);
1790
- box-shadow: var(--rm-border-all) var(--rm-color-primary-plus-one);
1791
- color: var(--rm-color-primary-on-plus-one);
2371
+ background-color: var(--op-color-primary-plus-one);
2372
+ box-shadow: var(--op-border-all) var(--op-color-primary-plus-one);
2373
+ color: var(--op-color-primary-on-plus-one);
1792
2374
  }
1793
2375
  .btn-primary.btn--no-border {
1794
2376
  background-color: transparent;
1795
2377
  box-shadow: none;
1796
- color: var(--rm-color-primary-base);
2378
+ color: var(--op-color-primary-base);
1797
2379
  }
1798
2380
  .btn-primary.btn--no-border:not(:disabled, .btn--disabled):hover {
1799
2381
  background-color: transparent;
1800
2382
  box-shadow: none;
1801
- color: var(--rm-color-primary-plus-one);
2383
+ color: var(--op-color-primary-plus-one);
1802
2384
  }
1803
2385
  .btn-primary.btn--outline {
1804
- background-color: var(--rm-color-primary-plus-seven);
1805
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
1806
- color: var(--rm-color-primary-on-plus-seven);
2386
+ background-color: var(--op-color-primary-plus-seven);
2387
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
2388
+ color: var(--op-color-primary-on-plus-seven);
1807
2389
  }
1808
2390
  .btn-primary.btn--outline:not(:disabled, .btn--disabled):hover {
1809
- background-color: var(--rm-color-primary-plus-four);
1810
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
1811
- color: var(--rm-color-primary-on-plus-four);
2391
+ background-color: var(--op-color-primary-plus-four);
2392
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
2393
+ color: var(--op-color-primary-on-plus-four);
1812
2394
  }
1813
2395
 
1814
2396
  .btn-secondary {
1815
- background-color: var(--rm-color-primary-plus-seven);
1816
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
1817
- color: var(--rm-color-primary-on-plus-seven);
2397
+ background-color: var(--op-color-primary-plus-seven);
2398
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
2399
+ color: var(--op-color-primary-on-plus-seven);
1818
2400
  }
1819
2401
  .btn-secondary:not(:disabled, .btn--disabled):hover {
1820
- background-color: var(--rm-color-primary-plus-four);
1821
- box-shadow: var(--rm-border-all) var(--rm-color-primary-on-plus-seven);
1822
- color: var(--rm-color-primary-on-plus-four);
2402
+ background-color: var(--op-color-primary-plus-four);
2403
+ box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
2404
+ color: var(--op-color-primary-on-plus-four);
1823
2405
  }
1824
2406
  .btn-secondary.btn--no-border {
1825
2407
  background-color: transparent;
1826
2408
  box-shadow: none;
1827
- color: var(--rm-color-primary-base);
2409
+ color: var(--op-color-primary-base);
1828
2410
  }
1829
2411
  .btn-secondary.btn--no-border:not(:disabled, .btn--disabled):hover {
1830
2412
  background-color: transparent;
1831
2413
  box-shadow: none;
1832
- color: var(--rm-color-primary-plus-one);
2414
+ color: var(--op-color-primary-plus-one);
1833
2415
  }
1834
2416
 
1835
2417
  .btn-delete {
1836
- background-color: var(--rm-color-alerts-danger-base);
1837
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-base);
1838
- color: var(--rm-color-alerts-danger-on-base);
2418
+ background-color: var(--op-color-alerts-danger-base);
2419
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
2420
+ color: var(--op-color-alerts-danger-on-base);
1839
2421
  }
1840
2422
  .btn-delete:not(:disabled, .btn--disabled):hover {
1841
- background-color: var(--rm-color-alerts-danger-plus-one);
1842
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-plus-one);
1843
- color: var(--rm-color-alerts-danger-on-plus-one);
2423
+ background-color: var(--op-color-alerts-danger-plus-one);
2424
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-one);
2425
+ color: var(--op-color-alerts-danger-on-plus-one);
1844
2426
  }
1845
2427
  .btn-delete.btn--no-border {
1846
2428
  background-color: transparent;
1847
2429
  box-shadow: none;
1848
- color: var(--rm-color-alerts-danger-base);
2430
+ color: var(--op-color-alerts-danger-base);
1849
2431
  }
1850
2432
  .btn-delete.btn--no-border:not(:disabled, .btn--disabled):hover {
1851
2433
  background-color: transparent;
1852
2434
  box-shadow: none;
1853
- color: var(--rm-color-alerts-danger-plus-one);
2435
+ color: var(--op-color-alerts-danger-plus-one);
1854
2436
  }
1855
2437
  .btn-delete.btn--outline {
1856
- background-color: var(--rm-color-alerts-danger-plus-seven);
1857
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-on-plus-seven);
1858
- color: var(--rm-color-alerts-danger-on-plus-seven);
2438
+ background-color: var(--op-color-alerts-danger-plus-seven);
2439
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
2440
+ color: var(--op-color-alerts-danger-on-plus-seven);
1859
2441
  }
1860
2442
  .btn-delete.btn--outline:not(:disabled, .btn--disabled):hover {
1861
- background-color: var(--rm-color-alerts-danger-plus-four);
1862
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-on-plus-seven);
1863
- color: var(--rm-color-alerts-danger-on-plus-four);
2443
+ background-color: var(--op-color-alerts-danger-plus-four);
2444
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
2445
+ color: var(--op-color-alerts-danger-on-plus-four);
1864
2446
  }
1865
2447
 
1866
2448
  .btn-group {
@@ -1913,49 +2495,53 @@ small {
1913
2495
 
1914
2496
  .card-padded, .card {
1915
2497
  position: relative;
1916
- border-radius: var(--rm-radius-medium);
1917
- background-color: var(--rm-color-background);
1918
- box-shadow: var(--rm-border-all) var(--rm-border-color);
1919
- color: var(--rm-color-on-background);
2498
+ border-radius: var(--op-radius-medium);
2499
+ background-color: var(--op-color-background);
2500
+ box-shadow: var(--op-border-all) var(--op-border-color);
2501
+ color: var(--op-color-on-background);
1920
2502
  contain: paint;
1921
- font-size: var(--rm-font-medium);
1922
- line-height: var(--rm-line-height-base);
2503
+ font-size: var(--op-font-medium);
2504
+ line-height: var(--op-line-height-base);
1923
2505
  }
1924
2506
  .card--condensed.card-padded, .card--condensed.card {
1925
- --rm-space-scale-unit: 1rem;
1926
- --rm-space-3x-small: calc(var(--rm-space-scale-unit) * 0.2);
1927
- --rm-space-2x-small: calc(var(--rm-space-scale-unit) * 0.4);
1928
- --rm-space-x-small: calc(var(--rm-space-scale-unit) * 0.8);
1929
- --rm-space-small: calc(var(--rm-space-scale-unit) * 1.2);
1930
- --rm-space-medium: calc(var(--rm-space-scale-unit) * 1.6);
1931
- --rm-space-large: calc(var(--rm-space-scale-unit) * 2);
1932
- --rm-space-x-large: calc(var(--rm-space-scale-unit) * 2.4);
1933
- --rm-space-2x-large: calc(var(--rm-space-scale-unit) * 2.8);
1934
- --rm-space-3x-large: calc(var(--rm-space-scale-unit) * 4);
1935
- --rm-space-4x-large: calc(var(--rm-space-scale-unit) * 8);
1936
- --rm-space-scale-unit: 0.5rem;
2507
+ /**
2508
+ * @tokens Space Scale
2509
+ * @presenter Spacing
2510
+ */
2511
+ --op-space-scale-unit: 1rem;
2512
+ --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2);
2513
+ --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4);
2514
+ --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8);
2515
+ --op-space-small: calc(var(--op-space-scale-unit) * 1.2);
2516
+ --op-space-medium: calc(var(--op-space-scale-unit) * 1.6);
2517
+ --op-space-large: calc(var(--op-space-scale-unit) * 2);
2518
+ --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4);
2519
+ --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8);
2520
+ --op-space-3x-large: calc(var(--op-space-scale-unit) * 4);
2521
+ --op-space-4x-large: calc(var(--op-space-scale-unit) * 8);
2522
+ --op-space-scale-unit: 0.5rem;
1937
2523
  }
1938
2524
  .card--shadow-x-small.card-padded, .card--shadow-x-small.card {
1939
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-x-small);
2525
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-x-small);
1940
2526
  }
1941
2527
  .card--shadow-small.card-padded, .card--shadow-small.card {
1942
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-small);
2528
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-small);
1943
2529
  }
1944
2530
  .card--shadow-medium.card-padded, .card--shadow-medium.card {
1945
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-medium);
2531
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-medium);
1946
2532
  }
1947
2533
  .card--shadow-large.card-padded, .card--shadow-large.card {
1948
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-large);
2534
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-large);
1949
2535
  }
1950
2536
  .card--shadow-x-large.card-padded, .card--shadow-x-large.card {
1951
- box-shadow: var(--rm-border-all) var(--rm-border-color), var(--rm-shadow-x-large);
2537
+ box-shadow: var(--op-border-all) var(--op-border-color), var(--op-shadow-x-large);
1952
2538
  }
1953
2539
  .card-padded .card__header, .card .card__header,
1954
2540
  .card-padded .card__body,
1955
2541
  .card .card__body,
1956
2542
  .card-padded .card__footer,
1957
2543
  .card .card__footer {
1958
- padding: var(--rm-space-medium);
2544
+ padding: var(--op-space-medium);
1959
2545
  }
1960
2546
  .card-padded .card__header h1, .card .card__header h1,
1961
2547
  .card-padded .card__header h2,
@@ -1972,128 +2558,128 @@ small {
1972
2558
  }
1973
2559
 
1974
2560
  .card-padded {
1975
- padding: var(--rm-space-medium);
2561
+ padding: var(--op-space-medium);
1976
2562
  }
1977
2563
 
1978
2564
  .flash {
1979
2565
  position: fixed;
1980
- z-index: var(--rm-z-index-alert-group);
1981
- top: var(--rm-space-large);
1982
- right: var(--rm-space-large);
2566
+ z-index: var(--op-z-index-alert-group);
2567
+ top: var(--op-space-large);
2568
+ right: var(--op-space-large);
1983
2569
  display: inline-grid;
1984
2570
  width: auto;
1985
2571
  align-items: center;
1986
2572
  justify-content: center;
1987
- padding: var(--rm-space-x-small) var(--rm-space-medium);
1988
- border-color: var(--rm-color-on-background);
1989
- border-radius: var(--rm-radius-small);
1990
- border-left-width: var(--rm-border-width-x-large);
2573
+ padding: var(--op-space-x-small) var(--op-space-medium);
2574
+ border-color: var(--op-color-on-background);
2575
+ border-radius: var(--op-radius-small);
2576
+ border-left-width: var(--op-border-width-x-large);
1991
2577
  border-left-style: solid;
1992
- animation: rm-slide-in-out-flash var(--rm-transition-flash) normal forwards;
1993
- background: var(--rm-color-background);
1994
- box-shadow: var(--rm-shadow-x-small);
1995
- color: var(--rm-color-on-background);
1996
- font-size: var(--rm-font-small);
1997
- gap: var(--rm-space-small);
2578
+ animation: var(--op-transition-flash);
2579
+ background: var(--op-color-background);
2580
+ box-shadow: var(--op-shadow-x-small);
2581
+ color: var(--op-color-on-background);
2582
+ font-size: var(--op-font-small);
2583
+ gap: var(--op-space-small);
1998
2584
  grid-auto-flow: column;
1999
2585
  }
2000
2586
  .flash--notice.flash {
2001
- border-color: var(--rm-color-alerts-notice-base);
2002
- color: var(--rm-color-alerts-notice-base);
2587
+ border-color: var(--op-color-alerts-notice-base);
2588
+ color: var(--op-color-alerts-notice-base);
2003
2589
  }
2004
2590
  .flash--info.flash {
2005
- border-color: var(--rm-color-alerts-info-base);
2006
- color: var(--rm-color-alerts-info-base);
2591
+ border-color: var(--op-color-alerts-info-base);
2592
+ color: var(--op-color-alerts-info-base);
2007
2593
  }
2008
2594
  .flash--alert.flash {
2009
- border-color: var(--rm-color-alerts-danger-base);
2010
- color: var(--rm-color-alerts-danger-base);
2595
+ border-color: var(--op-color-alerts-danger-base);
2596
+ color: var(--op-color-alerts-danger-base);
2011
2597
  }
2012
2598
  .flash--warning.flash {
2013
- border-color: var(--rm-color-alerts-warning-base);
2014
- color: var(--rm-color-alerts-warning-base);
2599
+ border-color: var(--op-color-alerts-warning-base);
2600
+ color: var(--op-color-alerts-warning-base);
2015
2601
  }
2016
2602
  .flash .flash__message-type {
2017
- color: var(--rm-color-on-background);
2603
+ color: var(--op-color-on-background);
2018
2604
  font-weight: bold;
2019
2605
  }
2020
2606
  .flash .flash__message {
2021
- color: var(--rm-color-on-background);
2022
- font-size: var(--rm-font-x-small);
2607
+ color: var(--op-color-on-background);
2608
+ font-size: var(--op-font-x-small);
2023
2609
  }
2024
2610
 
2025
2611
  textarea.form-control, .form-control:not([type=radio], [type=checkbox]) {
2026
- --__rm-input-height: var(--rm-input-height-large);
2612
+ --__op-input-height: var(--op-input-height-large);
2027
2613
  display: block;
2028
2614
  width: 100%;
2029
- min-width: var(--__rm-input-height);
2030
- height: var(--__rm-input-height);
2031
- padding: var(--rm-space-small) var(--rm-space-medium);
2615
+ min-width: var(--__op-input-height);
2616
+ height: var(--__op-input-height);
2617
+ padding: var(--op-space-small) var(--op-space-medium);
2032
2618
  border: none;
2033
- border-radius: var(--rm-radius-large);
2034
- background-color: var(--rm-color-neutral-plus-max);
2035
- box-shadow: var(--rm-border-all) var(--rm-border-color);
2036
- color: var(--rm-color-neutral-on-plus-max);
2619
+ border-radius: var(--op-radius-large);
2620
+ background-color: var(--op-color-neutral-plus-max);
2621
+ box-shadow: var(--op-border-all) var(--op-border-color);
2622
+ color: var(--op-color-neutral-on-plus-max);
2037
2623
  cursor: text;
2038
- font-size: var(--rm-font-small);
2039
- font-weight: var(--rm-font-weight-light);
2040
- line-height: var(--rm-line-height-base);
2624
+ font-size: var(--op-font-small);
2625
+ font-weight: var(--op-font-weight-light);
2626
+ line-height: var(--op-line-height-base);
2041
2627
  }
2042
2628
  textarea.form-control--read-only.form-control, .form-control--read-only.form-control:not([type=radio], [type=checkbox]) {
2043
2629
  height: fit-content;
2044
- background-color: var(--rm-color-neutral-plus-seven);
2630
+ background-color: var(--op-color-neutral-plus-seven);
2045
2631
  background-image: none;
2046
2632
  box-shadow: none;
2047
- color: var(--rm-color-neutral-on-plus-seven);
2633
+ color: var(--op-color-neutral-on-plus-seven);
2048
2634
  cursor: unset;
2049
2635
  }
2050
2636
  textarea.form-control--read-only[type=color].form-control, .form-control--read-only[type=color].form-control:not([type=radio], [type=checkbox]) {
2051
- height: var(--__rm-input-height);
2637
+ height: var(--__op-input-height);
2052
2638
  }
2053
2639
 
2054
2640
  select.form-control:not([multiple], [type=radio], [type=checkbox]), .form-control[type=color] {
2055
- padding-right: var(--rm-space-3x-large);
2641
+ padding-right: var(--op-space-3x-large);
2056
2642
  appearance: none;
2057
- background: var(--rm-form-dropdown-arrow) center right no-repeat;
2058
- background-position-x: calc(100% - (var(--rm-space-3x-large) / 2 - var(--rm-form-dropdown-arrow-width) / 2));
2643
+ background: var(--op-form-dropdown-arrow) center right no-repeat;
2644
+ background-position-x: calc(100% - (var(--op-space-3x-large) / 2 - var(--op-form-dropdown-arrow-width) / 2));
2059
2645
  cursor: pointer;
2060
2646
  }
2061
2647
 
2062
2648
  .form-label {
2063
- color: var(--rm-color-on-background);
2064
- font-size: var(--rm-font-small);
2065
- font-weight: var(--rm-font-weight-normal);
2066
- letter-spacing: var(--rm-letter-spacing-label);
2067
- line-height: var(--rm-line-height-base);
2649
+ color: var(--op-color-on-background);
2650
+ font-size: var(--op-font-small);
2651
+ font-weight: var(--op-font-weight-normal);
2652
+ letter-spacing: var(--op-letter-spacing-label);
2653
+ line-height: var(--op-line-height-base);
2068
2654
  }
2069
2655
 
2070
2656
  .form-control[type=radio], .form-control[type=checkbox] {
2071
- width: var(--rm-space-large);
2072
- height: var(--rm-space-large);
2657
+ width: var(--op-space-large);
2658
+ height: var(--op-space-large);
2073
2659
  align-self: center;
2074
2660
  margin: 0;
2075
- accent-color: var(--rm-color-primary-base);
2661
+ accent-color: var(--op-color-primary-base);
2076
2662
  cursor: pointer;
2077
2663
  }
2078
2664
  .form-control:disabled {
2079
2665
  cursor: not-allowed;
2080
2666
  }
2081
2667
  .form-control:focus, .form-control:focus-within, .form-control:focus-visible, .form-control:active {
2082
- box-shadow: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four), var(--rm-input-focus);
2668
+ box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
2083
2669
  outline: none;
2084
2670
  }
2085
2671
  .form-control:focus:hover:not(:disabled), .form-control:focus-within:hover:not(:disabled), .form-control:focus-visible:hover:not(:disabled), .form-control:active:hover:not(:disabled) {
2086
- box-shadow: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four), var(--rm-input-focus);
2672
+ box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
2087
2673
  }
2088
2674
 
2089
2675
  select.form-control[multiple] {
2090
- min-height: calc(2 * var(--__rm-input-height));
2676
+ min-height: calc(2 * var(--__op-input-height));
2091
2677
  }
2092
2678
 
2093
2679
  textarea.form-control {
2094
- min-width: var(--__rm-input-height);
2680
+ min-width: var(--__op-input-height);
2095
2681
  max-width: 100%;
2096
- min-height: var(--__rm-input-height);
2682
+ min-height: var(--__op-input-height);
2097
2683
  }
2098
2684
 
2099
2685
  .form-group--error {
@@ -2101,41 +2687,41 @@ textarea.form-control {
2101
2687
  /* stylelint-enable no-descending-specificity */
2102
2688
  }
2103
2689
  .form-group--error .form-control {
2104
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-minus-three);
2690
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-three);
2105
2691
  }
2106
2692
  .form-group--error .form-control[type=radio], .form-group--error .form-control[type=checkbox] {
2107
2693
  box-shadow: none;
2108
2694
  }
2109
2695
  .form-group--error .form-control[type=radio] + label, .form-group--error .form-control[type=checkbox] + label {
2110
- color: var(--rm-color-alerts-danger-minus-three);
2111
- font-weight: var(--rm-font-weight-bold);
2696
+ color: var(--op-color-alerts-danger-minus-three);
2697
+ font-weight: var(--op-font-weight-bold);
2112
2698
  }
2113
2699
 
2114
2700
  .form-error {
2115
2701
  width: fit-content;
2116
- padding: var(--rm-space-2x-small) var(--rm-space-x-small);
2117
- border-radius: var(--rm-radius-medium);
2118
- background: var(--rm-color-alerts-danger-plus-seven);
2119
- color: var(--rm-color-alerts-danger-on-plus-seven);
2120
- font-size: var(--rm-font-x-small);
2702
+ padding: var(--op-space-2x-small) var(--op-space-x-small);
2703
+ border-radius: var(--op-radius-medium);
2704
+ background: var(--op-color-alerts-danger-plus-seven);
2705
+ color: var(--op-color-alerts-danger-on-plus-seven);
2706
+ font-size: var(--op-font-x-small);
2121
2707
  }
2122
2708
 
2123
2709
  .form-hint {
2124
2710
  display: block;
2125
- font-size: var(--rm-font-small);
2711
+ font-size: var(--op-font-small);
2126
2712
  font-style: italic;
2127
2713
  }
2128
2714
 
2129
2715
  .form-error-summary {
2130
- padding: var(--rm-space-large);
2131
- border-radius: var(--rm-radius-large);
2132
- margin-bottom: var(--rm-space-large);
2133
- background-color: var(--rm-color-alerts-danger-plus-seven);
2134
- box-shadow: var(--rm-border-all) var(--rm-color-alerts-danger-on-plus-seven);
2135
- color: var(--rm-color-alerts-danger-on-plus-seven);
2716
+ padding: var(--op-space-large);
2717
+ border-radius: var(--op-radius-large);
2718
+ margin-bottom: var(--op-space-large);
2719
+ background-color: var(--op-color-alerts-danger-plus-seven);
2720
+ box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
2721
+ color: var(--op-color-alerts-danger-on-plus-seven);
2136
2722
  }
2137
2723
  .form-error-summary h2 {
2138
- font-size: var(--rm-font-medium);
2724
+ font-size: var(--op-font-medium);
2139
2725
  }
2140
2726
  .form-error-summary ul {
2141
2727
  margin-bottom: 0;
@@ -2144,8 +2730,8 @@ textarea.form-control {
2144
2730
  .form-group {
2145
2731
  display: grid;
2146
2732
  align-content: baseline;
2147
- padding: var(--rm-space-small) 0;
2148
- gap: var(--rm-space-x-small);
2733
+ padding: var(--op-space-small) 0;
2734
+ gap: var(--op-space-x-small);
2149
2735
  grid-auto-rows: auto;
2150
2736
  grid-template-columns: auto 1fr;
2151
2737
  /* stylelint-disable no-descending-specificity */
@@ -2169,83 +2755,83 @@ textarea.form-control {
2169
2755
 
2170
2756
  .material-symbols-outlined,
2171
2757
  .material-symbols {
2172
- --rm-mso-fill: 0;
2173
- --rm-mso-weight: var(--rm-font-weight-normal);
2174
- --rm-mso-grade: 0;
2175
- --rm-mso-optical-sizing: 20;
2176
- font-size: var(--rm-font-medium);
2177
- font-variation-settings: "FILL" var(--rm-mso-fill), "wght" var(--rm-mso-weight), "GRAD" var(--rm-mso-grade), "opsz" var(--rm-mso-optical-sizing);
2178
- line-height: var(--rm-line-height-densest);
2758
+ --op-mso-fill: 0;
2759
+ --op-mso-weight: var(--op-font-weight-normal);
2760
+ --op-mso-grade: 0;
2761
+ --op-mso-optical-sizing: 20;
2762
+ font-size: var(--op-font-medium);
2763
+ font-variation-settings: "FILL" var(--op-mso-fill), "wght" var(--op-mso-weight), "GRAD" var(--op-mso-grade), "opsz" var(--op-mso-optical-sizing);
2764
+ line-height: var(--op-line-height-densest);
2179
2765
  vertical-align: middle;
2180
2766
  }
2181
2767
 
2182
2768
  .icon--outlined {
2183
- --rm-mso-fill: 0;
2769
+ --op-mso-fill: 0;
2184
2770
  }
2185
2771
 
2186
2772
  .icon--filled {
2187
- --rm-mso-fill: 1;
2773
+ --op-mso-fill: 1;
2188
2774
  }
2189
2775
 
2190
2776
  .icon--weight-light {
2191
- --rm-mso-weight: var(--rm-font-weight-light);
2777
+ --op-mso-weight: var(--op-font-weight-light);
2192
2778
  }
2193
2779
 
2194
2780
  .icon--weight-normal {
2195
- --rm-mso-weight: var(--rm-font-weight-normal);
2781
+ --op-mso-weight: var(--op-font-weight-normal);
2196
2782
  }
2197
2783
 
2198
2784
  .icon--weight-semi-bold {
2199
- --rm-mso-weight: var(--rm-font-weight-semi-bold);
2785
+ --op-mso-weight: var(--op-font-weight-semi-bold);
2200
2786
  }
2201
2787
 
2202
2788
  .icon--weight-bold, .alert-warning .alert__icon, .alert-danger .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
2203
- --rm-mso-weight: var(--rm-font-weight-bold);
2789
+ --op-mso-weight: var(--op-font-weight-bold);
2204
2790
  }
2205
2791
 
2206
2792
  .icon--low-emphasis {
2207
- --rm-mso-grade: -20;
2793
+ --op-mso-grade: -20;
2208
2794
  }
2209
2795
 
2210
2796
  .icon--normal-emphasis {
2211
- --rm-mso-grade: 0;
2797
+ --op-mso-grade: 0;
2212
2798
  }
2213
2799
 
2214
2800
  .icon--high-emphasis {
2215
- --rm-mso-grade: 200;
2801
+ --op-mso-grade: 200;
2216
2802
  }
2217
2803
 
2218
2804
  .icon--medium {
2219
- font-size: var(--rm-font-medium);
2220
- --rm-mso-optical-sizing: 20;
2805
+ font-size: var(--op-font-medium);
2806
+ --op-mso-optical-sizing: 20;
2221
2807
  }
2222
2808
 
2223
2809
  .icon--large, .alert-warning .alert__icon, .alert-danger .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
2224
- font-size: var(--rm-font-large);
2225
- --rm-mso-optical-sizing: 40;
2810
+ font-size: var(--op-font-large);
2811
+ --op-mso-optical-sizing: 40;
2226
2812
  }
2227
2813
 
2228
2814
  .icon--x-large, .sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar .sidebar__item .sidebar__item-icon {
2229
- font-size: var(--rm-font-x-large);
2230
- --rm-mso-optical-sizing: 48;
2815
+ font-size: var(--op-font-2x-large);
2816
+ --op-mso-optical-sizing: 48;
2231
2817
  }
2232
2818
 
2233
2819
  .custom-icons {
2234
2820
  display: inline-block;
2235
- width: var(--rm-font-x-large);
2236
- height: var(--rm-font-x-large);
2821
+ width: var(--op-font-2x-large);
2822
+ height: var(--op-font-2x-large);
2237
2823
  }
2238
2824
  .custom-icons.icon--medium {
2239
- font-size: var(--rm-font-small);
2240
- --rm-mso-optical-sizing: 20;
2825
+ font-size: var(--op-font-small);
2826
+ --op-mso-optical-sizing: 20;
2241
2827
  }
2242
2828
  .custom-icons.icon--large, .alert-warning .custom-icons.alert__icon, .alert-danger .custom-icons.alert__icon, .alert-info .custom-icons.alert__icon, .alert-notice .custom-icons.alert__icon {
2243
- width: var(--rm-font-large);
2244
- height: var(--rm-font-large);
2829
+ width: var(--op-font-large);
2830
+ height: var(--op-font-large);
2245
2831
  }
2246
2832
  .custom-icons.icon--x-large, .sidebar-subtle-primary .sidebar__item .custom-icons.sidebar__item-icon, .sidebar-primary .sidebar__item .custom-icons.sidebar__item-icon, .sidebar .sidebar__item .custom-icons.sidebar__item-icon {
2247
- width: var(--rm-font-2x-large);
2248
- height: var(--rm-font-2x-large);
2833
+ width: var(--op-font-3x-large);
2834
+ height: var(--op-font-3x-large);
2249
2835
  }
2250
2836
 
2251
2837
  .custom-icons svg {
@@ -2258,31 +2844,31 @@ textarea.form-control {
2258
2844
  }
2259
2845
 
2260
2846
  .sidebar-subtle-primary, .sidebar-primary, .sidebar {
2261
- --_rm-sidebar-background-color: var(--rm-color-neutral-plus-seven);
2262
- --_rm-sidebar-text-color: var(--rm-color-neutral-on-plus-seven);
2263
- --_rm-sidebar-icon-background-active-color: var(--rm-color-neutral-plus-three);
2264
- --_rm-sidebar-icon-text-active-color: var(--rm-color-neutral-on-plus-three);
2265
- --_rm-sidebar-icon-background-hover-color: var(--rm-color-neutral-plus-four);
2266
- --_rm-sidebar-icon-text-hover-color: var(--rm-color-neutral-on-plus-four);
2267
- --_rm-sidebar-rail-width: 8.8rem;
2268
- --_rm-sidebar-drawer-width: 25rem;
2269
- --_rm-sidebar-spacing: var(--rm-space-medium);
2270
- --_rm-sidebar-link-spacing: var(--rm-space-large);
2271
- --_rm-sidebar-transition: all var(--rm-transition-navigation) ease-in-out;
2272
- --__rm-sidebar-width: var(--_rm-sidebar-drawer-width);
2847
+ --_op-sidebar-background-color: var(--op-color-neutral-plus-seven);
2848
+ --_op-sidebar-text-color: var(--op-color-neutral-on-plus-seven);
2849
+ --_op-sidebar-icon-background-active-color: var(--op-color-neutral-plus-three);
2850
+ --_op-sidebar-icon-text-active-color: var(--op-color-neutral-on-plus-three);
2851
+ --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-four);
2852
+ --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-four);
2853
+ --_op-sidebar-rail-width: 8.8rem;
2854
+ --_op-sidebar-drawer-width: 25rem;
2855
+ --_op-sidebar-spacing: var(--op-space-medium);
2856
+ --_op-sidebar-link-spacing: var(--op-space-large);
2857
+ --_op-sidebar-transition: var(--op-transition-sidebar);
2858
+ --__op-sidebar-width: var(--_op-sidebar-drawer-width);
2273
2859
  display: flex;
2274
- width: var(--__rm-sidebar-width);
2860
+ width: var(--__op-sidebar-width);
2275
2861
  flex-direction: column;
2276
- padding: var(--_rm-sidebar-spacing) 0;
2277
- background-color: var(--_rm-sidebar-background-color);
2278
- color: var(--_rm-sidebar-text-color);
2279
- gap: var(--_rm-sidebar-spacing);
2862
+ padding: var(--_op-sidebar-spacing) 0;
2863
+ background-color: var(--_op-sidebar-background-color);
2864
+ color: var(--_op-sidebar-text-color);
2865
+ gap: var(--_op-sidebar-spacing);
2280
2866
  overflow-y: auto;
2281
- transition: var(--_rm-sidebar-transition);
2867
+ transition: var(--_op-sidebar-transition);
2282
2868
  }
2283
2869
  .sidebar-subtle-primary .sidebar__brand, .sidebar-primary .sidebar__brand, .sidebar .sidebar__brand {
2284
2870
  display: block;
2285
- padding: 0 var(--_rm-sidebar-spacing);
2871
+ padding: 0 var(--_op-sidebar-spacing);
2286
2872
  }
2287
2873
  .sidebar-subtle-primary .sidebar__content, .sidebar-primary .sidebar__content, .sidebar .sidebar__content {
2288
2874
  display: flex;
@@ -2301,128 +2887,128 @@ textarea.form-control {
2301
2887
  .sidebar-subtle-primary .sidebar__item, .sidebar-primary .sidebar__item, .sidebar .sidebar__item {
2302
2888
  display: flex;
2303
2889
  align-items: center;
2304
- color: var(--_rm-sidebar-text-color);
2890
+ color: var(--_op-sidebar-text-color);
2305
2891
  cursor: pointer;
2306
2892
  text-align: center;
2307
2893
  text-decoration: none;
2308
2894
  }
2309
2895
  .sidebar-subtle-primary .sidebar__item:visited, .sidebar-primary .sidebar__item:visited, .sidebar .sidebar__item:visited {
2310
- color: var(--_rm-sidebar-text-color);
2896
+ color: var(--_op-sidebar-text-color);
2311
2897
  }
2312
2898
  .sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar .sidebar__item:hover .sidebar__item-icon, .sidebar-subtle-primary .sidebar__item.active .sidebar__item-icon, .sidebar-primary .sidebar__item.active .sidebar__item-icon, .sidebar .sidebar__item.active .sidebar__item-icon {
2313
- --rm-mso-weight: var(--rm-font-weight-bold);
2899
+ --op-mso-weight: var(--op-font-weight-bold);
2314
2900
  }
2315
2901
  .sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar .sidebar__item:hover .sidebar__item-icon {
2316
- color: var(--_rm-sidebar-text-color);
2902
+ color: var(--_op-sidebar-text-color);
2317
2903
  }
2318
2904
  .sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar .sidebar__item .sidebar__item-icon {
2319
2905
  /* stylelint-disable scss/at-extend-no-missing-placeholder */
2320
2906
  /* stylelint-enable scss/at-extend-no-missing-placeholder */
2321
- --rm-mso-weight: var(--rm-font-weight-medium);
2907
+ --op-mso-weight: var(--op-font-weight-medium);
2322
2908
  display: flex;
2323
2909
  align-items: center;
2324
2910
  justify-content: center;
2325
- border-radius: var(--rm-radius-pill);
2911
+ border-radius: var(--op-radius-pill);
2326
2912
  }
2327
2913
  .sidebar-subtle-primary .sidebar__item .sidebar__item-label, .sidebar-primary .sidebar__item .sidebar__item-label, .sidebar .sidebar__item .sidebar__item-label {
2328
2914
  overflow: hidden;
2329
2915
  max-width: 90%;
2330
- font-weight: var(--rm-font-weight-medium);
2331
- letter-spacing: var(--rm-letter-spacing-navigation);
2332
- line-height: var(--rm-line-height-dense);
2916
+ font-weight: var(--op-font-weight-medium);
2917
+ letter-spacing: var(--op-letter-spacing-navigation);
2918
+ line-height: var(--op-line-height-dense);
2333
2919
  text-overflow: ellipsis;
2334
2920
  white-space: nowrap;
2335
2921
  }
2336
2922
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive), .sidebar--drawer.sidebar-primary:not(.sidebar--responsive), .sidebar--drawer.sidebar:not(.sidebar--responsive) {
2337
- --__rm-sidebar-width: var(--_rm-sidebar-drawer-width);
2923
+ --__op-sidebar-width: var(--_op-sidebar-drawer-width);
2338
2924
  }
2339
2925
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__content, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__content, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__content {
2340
- padding: 0 var(--_rm-sidebar-spacing);
2926
+ padding: 0 var(--_op-sidebar-spacing);
2341
2927
  }
2342
2928
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__section-title, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__section-title, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__section-title {
2343
2929
  overflow: hidden;
2344
- height: var(--rm-input-height-large);
2345
- padding: var(--rm-space-small) var(--rm-space-medium);
2346
- color: var(--_rm-sidebar-text-color);
2347
- font-size: var(--rm-font-small);
2348
- font-weight: var(--rm-font-weight-bold);
2930
+ height: var(--op-input-height-large);
2931
+ padding: var(--op-space-small) var(--op-space-medium);
2932
+ color: var(--_op-sidebar-text-color);
2933
+ font-size: var(--op-font-small);
2934
+ font-weight: var(--op-font-weight-bold);
2349
2935
  text-overflow: ellipsis;
2350
2936
  white-space: nowrap;
2351
2937
  }
2352
2938
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__section-divider, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__section-divider, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__section-divider {
2353
- border-bottom: var(--rm-border-width) solid var(--_rm-sidebar-text-color);
2354
- margin: 0 var(--_rm-sidebar-spacing);
2939
+ border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
2940
+ margin: 0 var(--_op-sidebar-spacing);
2355
2941
  }
2356
2942
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item {
2357
- height: var(--rm-input-height-large);
2943
+ height: var(--op-input-height-large);
2358
2944
  flex-direction: row;
2359
- padding: var(--rm-space-x-small) var(--rm-space-medium);
2360
- border-radius: var(--rm-radius-pill);
2361
- gap: var(--_rm-sidebar-link-spacing);
2945
+ padding: var(--op-space-x-small) var(--op-space-medium);
2946
+ border-radius: var(--op-radius-pill);
2947
+ gap: var(--_op-sidebar-link-spacing);
2362
2948
  }
2363
2949
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item.active {
2364
- transition: var(--_rm-sidebar-transition);
2950
+ transition: var(--_op-sidebar-transition);
2365
2951
  }
2366
2952
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item:hover {
2367
- background-color: var(--_rm-sidebar-icon-background-hover-color);
2368
- color: var(--_rm-sidebar-icon-text-hover-color);
2953
+ background-color: var(--_op-sidebar-icon-background-hover-color);
2954
+ color: var(--_op-sidebar-icon-text-hover-color);
2369
2955
  }
2370
2956
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item:hover .sidebar__item-icon {
2371
- color: var(--_rm-sidebar-icon-text-hover-color);
2957
+ color: var(--_op-sidebar-icon-text-hover-color);
2372
2958
  }
2373
2959
  .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item.active {
2374
- background-color: var(--_rm-sidebar-icon-background-active-color);
2375
- color: var(--_rm-sidebar-icon-text-active-color);
2960
+ background-color: var(--_op-sidebar-icon-background-active-color);
2961
+ color: var(--_op-sidebar-icon-text-active-color);
2376
2962
  }
2377
2963
  @media (width > 1024px) {
2378
2964
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary, .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
2379
- --__rm-sidebar-width: var(--_rm-sidebar-drawer-width);
2965
+ --__op-sidebar-width: var(--_op-sidebar-drawer-width);
2380
2966
  }
2381
2967
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
2382
- padding: 0 var(--_rm-sidebar-spacing);
2968
+ padding: 0 var(--_op-sidebar-spacing);
2383
2969
  }
2384
2970
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-title {
2385
2971
  overflow: hidden;
2386
- height: var(--rm-input-height-large);
2387
- padding: var(--rm-space-small) var(--rm-space-medium);
2388
- color: var(--_rm-sidebar-text-color);
2389
- font-size: var(--rm-font-small);
2390
- font-weight: var(--rm-font-weight-bold);
2972
+ height: var(--op-input-height-large);
2973
+ padding: var(--op-space-small) var(--op-space-medium);
2974
+ color: var(--_op-sidebar-text-color);
2975
+ font-size: var(--op-font-small);
2976
+ font-weight: var(--op-font-weight-bold);
2391
2977
  text-overflow: ellipsis;
2392
2978
  white-space: nowrap;
2393
2979
  }
2394
2980
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-divider, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-divider, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-divider {
2395
- border-bottom: var(--rm-border-width) solid var(--_rm-sidebar-text-color);
2396
- margin: 0 var(--_rm-sidebar-spacing);
2981
+ border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
2982
+ margin: 0 var(--_op-sidebar-spacing);
2397
2983
  }
2398
2984
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item {
2399
- height: var(--rm-input-height-large);
2985
+ height: var(--op-input-height-large);
2400
2986
  flex-direction: row;
2401
- padding: var(--rm-space-x-small) var(--rm-space-medium);
2402
- border-radius: var(--rm-radius-pill);
2403
- gap: var(--_rm-sidebar-link-spacing);
2987
+ padding: var(--op-space-x-small) var(--op-space-medium);
2988
+ border-radius: var(--op-radius-pill);
2989
+ gap: var(--_op-sidebar-link-spacing);
2404
2990
  }
2405
2991
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item.active {
2406
- transition: var(--_rm-sidebar-transition);
2992
+ transition: var(--_op-sidebar-transition);
2407
2993
  }
2408
2994
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover {
2409
- background-color: var(--_rm-sidebar-icon-background-hover-color);
2410
- color: var(--_rm-sidebar-icon-text-hover-color);
2995
+ background-color: var(--_op-sidebar-icon-background-hover-color);
2996
+ color: var(--_op-sidebar-icon-text-hover-color);
2411
2997
  }
2412
2998
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover .sidebar__item-icon {
2413
- color: var(--_rm-sidebar-icon-text-hover-color);
2999
+ color: var(--_op-sidebar-icon-text-hover-color);
2414
3000
  }
2415
3001
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item.active {
2416
- background-color: var(--_rm-sidebar-icon-background-active-color);
2417
- color: var(--_rm-sidebar-icon-text-active-color);
3002
+ background-color: var(--_op-sidebar-icon-background-active-color);
3003
+ color: var(--_op-sidebar-icon-text-active-color);
2418
3004
  }
2419
3005
  }
2420
3006
  @media (width <= 1024px) {
2421
3007
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary, .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
2422
- --__rm-sidebar-width: var(--_rm-sidebar-rail-width);
3008
+ --__op-sidebar-width: var(--_op-sidebar-rail-width);
2423
3009
  }
2424
3010
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
2425
- gap: var(--_rm-sidebar-link-spacing);
3011
+ gap: var(--_op-sidebar-link-spacing);
2426
3012
  }
2427
3013
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-title,
2428
3014
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-divider,
@@ -2432,27 +3018,27 @@ textarea.form-control {
2432
3018
  }
2433
3019
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item {
2434
3020
  flex-direction: column;
2435
- gap: var(--rm-space-2x-small);
3021
+ gap: var(--op-space-2x-small);
2436
3022
  }
2437
3023
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item .sidebar__item-icon {
2438
- padding: var(--rm-space-2x-small) var(--rm-space-medium);
2439
- transition: var(--_rm-sidebar-transition);
3024
+ padding: var(--op-space-2x-small) var(--op-space-medium);
3025
+ transition: var(--_op-sidebar-transition);
2440
3026
  }
2441
3027
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover .sidebar__item-icon {
2442
- background-color: var(--_rm-sidebar-icon-background-hover-color);
3028
+ background-color: var(--_op-sidebar-icon-background-hover-color);
2443
3029
  }
2444
3030
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item.active .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item.active .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item.active .sidebar__item-icon {
2445
- background-color: var(--_rm-sidebar-icon-background-active-color);
3031
+ background-color: var(--_op-sidebar-icon-background-active-color);
2446
3032
  }
2447
3033
  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item .sidebar__item-label, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item .sidebar__item-label, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item .sidebar__item-label {
2448
- font-size: var(--rm-font-x-small);
3034
+ font-size: var(--op-font-x-small);
2449
3035
  }
2450
3036
  }
2451
3037
  .sidebar--rail.sidebar-subtle-primary, .sidebar--rail.sidebar-primary, .sidebar--rail.sidebar {
2452
- --__rm-sidebar-width: var(--_rm-sidebar-rail-width);
3038
+ --__op-sidebar-width: var(--_op-sidebar-rail-width);
2453
3039
  }
2454
3040
  .sidebar--rail.sidebar-subtle-primary .sidebar__content, .sidebar--rail.sidebar-primary .sidebar__content, .sidebar--rail.sidebar .sidebar__content {
2455
- gap: var(--_rm-sidebar-link-spacing);
3041
+ gap: var(--_op-sidebar-link-spacing);
2456
3042
  }
2457
3043
  .sidebar--rail.sidebar-subtle-primary .sidebar__section-title, .sidebar--rail.sidebar-primary .sidebar__section-title, .sidebar--rail.sidebar .sidebar__section-title,
2458
3044
  .sidebar--rail.sidebar-subtle-primary .sidebar__section-divider,
@@ -2462,58 +3048,58 @@ textarea.form-control {
2462
3048
  }
2463
3049
  .sidebar--rail.sidebar-subtle-primary .sidebar__item, .sidebar--rail.sidebar-primary .sidebar__item, .sidebar--rail.sidebar .sidebar__item {
2464
3050
  flex-direction: column;
2465
- gap: var(--rm-space-2x-small);
3051
+ gap: var(--op-space-2x-small);
2466
3052
  }
2467
3053
  .sidebar--rail.sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar--rail.sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar--rail.sidebar .sidebar__item .sidebar__item-icon {
2468
- padding: var(--rm-space-2x-small) var(--rm-space-medium);
2469
- transition: var(--_rm-sidebar-transition);
3054
+ padding: var(--op-space-2x-small) var(--op-space-medium);
3055
+ transition: var(--_op-sidebar-transition);
2470
3056
  }
2471
3057
  .sidebar--rail.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--rail.sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--rail.sidebar .sidebar__item:hover .sidebar__item-icon {
2472
- background-color: var(--_rm-sidebar-icon-background-hover-color);
3058
+ background-color: var(--_op-sidebar-icon-background-hover-color);
2473
3059
  }
2474
3060
  .sidebar--rail.sidebar-subtle-primary .sidebar__item.active .sidebar__item-icon, .sidebar--rail.sidebar-primary .sidebar__item.active .sidebar__item-icon, .sidebar--rail.sidebar .sidebar__item.active .sidebar__item-icon {
2475
- background-color: var(--_rm-sidebar-icon-background-active-color);
3061
+ background-color: var(--_op-sidebar-icon-background-active-color);
2476
3062
  }
2477
3063
  .sidebar--rail.sidebar-subtle-primary .sidebar__item .sidebar__item-label, .sidebar--rail.sidebar-primary .sidebar__item .sidebar__item-label, .sidebar--rail.sidebar .sidebar__item .sidebar__item-label {
2478
- font-size: var(--rm-font-x-small);
3064
+ font-size: var(--op-font-x-small);
2479
3065
  }
2480
3066
 
2481
3067
  .sidebar-primary {
2482
- --_rm-sidebar-background-color: var(--rm-color-primary-plus-seven);
2483
- --_rm-sidebar-text-color: var(--rm-color-primary-on-plus-seven);
2484
- --_rm-sidebar-icon-background-active-color: var(--rm-color-primary-plus-three);
2485
- --_rm-sidebar-icon-text-active-color: var(--rm-color-primary-on-plus-three);
2486
- --_rm-sidebar-icon-background-hover-color: var(--rm-color-primary-plus-four);
2487
- --_rm-sidebar-icon-text-hover-color: var(--rm-color-primary-on-plus-four);
3068
+ --_op-sidebar-background-color: var(--op-color-primary-plus-seven);
3069
+ --_op-sidebar-text-color: var(--op-color-primary-on-plus-seven);
3070
+ --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
3071
+ --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
3072
+ --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
3073
+ --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
2488
3074
  }
2489
3075
 
2490
3076
  .sidebar-subtle-primary {
2491
- --_rm-sidebar-background-color: var(--rm-color-primary-plus-max);
2492
- --_rm-sidebar-text-color: var(--rm-color-primary-on-plus-max);
2493
- --_rm-sidebar-icon-background-active-color: var(--rm-color-primary-plus-three);
2494
- --_rm-sidebar-icon-text-active-color: var(--rm-color-primary-on-plus-three);
2495
- --_rm-sidebar-icon-background-hover-color: var(--rm-color-primary-plus-four);
2496
- --_rm-sidebar-icon-text-hover-color: var(--rm-color-primary-on-plus-four);
3077
+ --_op-sidebar-background-color: var(--op-color-primary-plus-max);
3078
+ --_op-sidebar-text-color: var(--op-color-primary-on-plus-max);
3079
+ --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
3080
+ --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
3081
+ --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
3082
+ --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
2497
3083
  }
2498
3084
 
2499
3085
  .table-container, .table-danger, .table-primary, .table {
2500
- --_rm-table-cell-padding-default: var(--rm-space-small) var(--rm-space-x-small);
2501
- --_rm-table-cell-padding-comfortable: var(--rm-space-medium) var(--rm-space-small);
2502
- --_rm-table-cell-padding-compact: var(--rm-space-x-small) var(--rm-space-2x-small);
2503
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-default);
3086
+ --_op-table-cell-padding-default: var(--op-space-small) var(--op-space-x-small);
3087
+ --_op-table-cell-padding-comfortable: var(--op-space-medium) var(--op-space-small);
3088
+ --_op-table-cell-padding-compact: var(--op-space-x-small) var(--op-space-2x-small);
3089
+ --__op-table-cell-padding: var(--_op-table-cell-padding-default);
2504
3090
  width: 100%;
2505
- border-radius: var(--rm-radius-medium);
3091
+ border-radius: var(--op-radius-medium);
2506
3092
  border-collapse: collapse;
2507
- box-shadow: var(--rm-border-all) var(--rm-border-color);
3093
+ box-shadow: var(--op-border-all) var(--op-border-color);
2508
3094
  contain: paint;
2509
3095
  table-layout: auto;
2510
3096
  }
2511
3097
  .table-container thead, .table-danger thead, .table-primary thead, .table thead {
2512
- background-color: var(--rm-color-neutral-plus-four);
2513
- color: var(--rm-color-neutral-on-plus-four);
3098
+ background-color: var(--op-color-neutral-plus-four);
3099
+ color: var(--op-color-neutral-on-plus-four);
2514
3100
  }
2515
3101
  .table-container th, .table-danger th, .table-primary th, .table th {
2516
- font-weight: var(--rm-font-weight-normal);
3102
+ font-weight: var(--op-font-weight-normal);
2517
3103
  text-align: left;
2518
3104
  text-transform: uppercase;
2519
3105
  }
@@ -2522,22 +3108,22 @@ textarea.form-control {
2522
3108
  .table-danger tfoot,
2523
3109
  .table-primary tfoot,
2524
3110
  .table tfoot {
2525
- background-color: var(--rm-color-background);
2526
- color: var(--rm-color-on-background);
3111
+ background-color: var(--op-color-background);
3112
+ color: var(--op-color-on-background);
2527
3113
  }
2528
3114
  .table-container th, .table-danger th, .table-primary th, .table th,
2529
3115
  .table-container td,
2530
3116
  .table-danger td,
2531
3117
  .table-primary td,
2532
3118
  .table td {
2533
- padding: var(--__rm-table-cell-padding);
2534
- font-size: var(--rm-font-small);
3119
+ padding: var(--__op-table-cell-padding);
3120
+ font-size: var(--op-font-small);
2535
3121
  }
2536
3122
  .table-container tr:not(:last-child), .table-danger tr:not(:last-child), .table-primary tr:not(:last-child), .table tr:not(:last-child) {
2537
- box-shadow: inset var(--rm-border-top) var(--rm-border-color);
3123
+ box-shadow: inset var(--op-border-top) var(--op-border-color);
2538
3124
  }
2539
3125
  .table-container tfoot tr, .table-danger tfoot tr, .table-primary tfoot tr, .table tfoot tr {
2540
- box-shadow: var(--rm-border-top) var(--rm-border-color);
3126
+ box-shadow: var(--op-border-top) var(--op-border-color);
2541
3127
  }
2542
3128
  .table--auto-layout.table-container, .table--auto-layout.table-danger, .table--auto-layout.table-primary, .table--auto-layout.table {
2543
3129
  table-layout: auto;
@@ -2546,21 +3132,21 @@ textarea.form-control {
2546
3132
  table-layout: fixed;
2547
3133
  }
2548
3134
  .table--default-density.table-container, .table--default-density.table-danger, .table--default-density.table-primary, .table--default-density.table {
2549
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-default);
3135
+ --__op-table-cell-padding: var(--_op-table-cell-padding-default);
2550
3136
  }
2551
3137
  .table--comfortable-density.table-container, .table--comfortable-density.table-danger, .table--comfortable-density.table-primary, .table--comfortable-density.table {
2552
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-comfortable);
3138
+ --__op-table-cell-padding: var(--_op-table-cell-padding-comfortable);
2553
3139
  }
2554
3140
  .table--compact-density.table-container, .table--compact-density.table-danger, .table--compact-density.table-primary, .table--compact-density.table {
2555
- --__rm-table-cell-padding: var(--_rm-table-cell-padding-compact);
3141
+ --__op-table-cell-padding: var(--_op-table-cell-padding-compact);
2556
3142
  }
2557
3143
  .table--even-striped.table-container tbody tr:nth-child(even), .table--even-striped.table-danger tbody tr:nth-child(even), .table--even-striped.table-primary tbody tr:nth-child(even), .table--even-striped.table tbody tr:nth-child(even) {
2558
- background-color: var(--rm-color-neutral-plus-seven);
2559
- color: var(--rm-color-neutral-on-plus-seven);
3144
+ background-color: var(--op-color-neutral-plus-seven);
3145
+ color: var(--op-color-neutral-on-plus-seven);
2560
3146
  }
2561
3147
  .table--odd-striped.table-container tbody tr:nth-child(odd), .table--odd-striped.table-danger tbody tr:nth-child(odd), .table--odd-striped.table-primary tbody tr:nth-child(odd), .table--odd-striped.table tbody tr:nth-child(odd) {
2562
- background-color: var(--rm-color-neutral-plus-seven);
2563
- color: var(--rm-color-neutral-on-plus-seven);
3148
+ background-color: var(--op-color-neutral-plus-seven);
3149
+ color: var(--op-color-neutral-on-plus-seven);
2564
3150
  }
2565
3151
  .table--sticky-header.table-container thead, .table--sticky-header.table-danger thead, .table--sticky-header.table-primary thead, .table--sticky-header.table thead {
2566
3152
  position: sticky;
@@ -2572,13 +3158,13 @@ textarea.form-control {
2572
3158
  }
2573
3159
 
2574
3160
  .table-primary thead {
2575
- background-color: var(--rm-color-primary-plus-seven);
2576
- color: var(--rm-color-primary-on-plus-seven);
3161
+ background-color: var(--op-color-primary-plus-seven);
3162
+ color: var(--op-color-primary-on-plus-seven);
2577
3163
  }
2578
3164
 
2579
3165
  .table-danger thead {
2580
- background-color: var(--rm-color-alerts-danger-plus-seven);
2581
- color: var(--rm-color-alerts-danger-on-plus-seven);
3166
+ background-color: var(--op-color-alerts-danger-plus-seven);
3167
+ color: var(--op-color-alerts-danger-on-plus-seven);
2582
3168
  }
2583
3169
 
2584
3170
  .table-container {