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