@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.
Files changed (30) hide show
  1. package/.github/release.yml +53 -0
  2. package/.github/workflows/publish-storybook.yml +11 -3
  3. package/.storybook/documentation.scss +64 -36
  4. package/.storybook/main.js +1 -0
  5. package/.stylelintrc.json +1 -1
  6. package/README.md +15 -0
  7. package/dist/css/optics.css +1911 -1325
  8. package/dist/css/optics.css.map +1 -1
  9. package/dist/scss/addons/rails-modal-and-panel/modal.scss +38 -13
  10. package/dist/scss/addons/rails-modal-and-panel/panel.scss +38 -13
  11. package/dist/scss/addons/tom-select.scss +22 -22
  12. package/dist/scss/components/alert.scss +48 -48
  13. package/dist/scss/components/badge.scss +20 -20
  14. package/dist/scss/components/button.scss +72 -72
  15. package/dist/scss/components/card.scss +14 -14
  16. package/dist/scss/components/flash.scss +24 -24
  17. package/dist/scss/components/form.scss +48 -48
  18. package/dist/scss/components/icon.scss +32 -32
  19. package/dist/scss/components/sidebar.scss +67 -67
  20. package/dist/scss/components/table.scss +26 -26
  21. package/dist/scss/core/base.scss +16 -16
  22. package/dist/scss/core/layout.scss +8 -8
  23. package/dist/scss/core/tokens/base_tokens.scss +223 -123
  24. package/dist/scss/core/tokens/dark_mode_tokens.scss +409 -262
  25. package/dist/scss/core/tokens/scale_color_tokens.scss +408 -240
  26. package/dist/scss/core/utilities.scss +74 -70
  27. package/dist/scss/recipes/16six-sidebar.scss +17 -17
  28. package/dist/scss/recipes/domains-sidebar.scss +9 -9
  29. package/dist/tokens/tokens.json +567 -276
  30. package/package.json +4 -2
package/dist/scss/core/tokens/dark_mode_tokens.scss CHANGED
@@ -1,299 +1,449 @@
1
1
  @mixin primary-semantic-scale-dark {
2
+ /**
3
+ * @tokens Primary Dark Colors
4
+ * @presenter Color
5
+ */
6
+
2
7
  // Main Scale
3
- --rm-color-primary-plus-max: var(--rm-color-black);
4
- --rm-color-primary-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
5
- --rm-color-primary-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
6
- --rm-color-primary-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 12%);
7
- --rm-color-primary-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 14%);
8
- --rm-color-primary-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
9
- --rm-color-primary-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
10
- --rm-color-primary-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 24%);
11
- --rm-color-primary-plus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 28%);
12
- --rm-color-primary-base: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 32%);
13
- --rm-color-primary-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 36%);
14
- --rm-color-primary-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 40%);
15
- --rm-color-primary-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 48%);
16
- --rm-color-primary-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 52%);
17
- --rm-color-primary-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 64%);
18
- --rm-color-primary-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
19
- --rm-color-primary-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
20
- --rm-color-primary-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
21
- --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%);
22
27
 
23
28
  // On Scale
24
- --rm-color-primary-on-plus-max: var(--rm-color-white);
25
- --rm-color-primary-on-plus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
26
- --rm-color-primary-on-plus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
27
- --rm-color-primary-on-plus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
28
- --rm-color-primary-on-plus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 72%);
29
- --rm-color-primary-on-plus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 80%);
30
- --rm-color-primary-on-plus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
31
- --rm-color-primary-on-plus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 88%);
32
- --rm-color-primary-on-plus-one: var(--rm-color-white);
33
- --rm-color-primary-on-base: var(--rm-color-white);
34
- --rm-color-primary-on-minus-one: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
35
- --rm-color-primary-on-minus-two: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 90%);
36
- --rm-color-primary-on-minus-three: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 86%);
37
- --rm-color-primary-on-minus-four: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 84%);
38
- --rm-color-primary-on-minus-five: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 20%);
39
- --rm-color-primary-on-minus-six: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 16%);
40
- --rm-color-primary-on-minus-seven: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 8%);
41
- --rm-color-primary-on-minus-eight: hsl(var(--rm-color-primary-h) var(--rm-color-primary-s) 4%);
42
- --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%);
43
67
  }
44
68
 
45
69
  @mixin neutral-semantic-scale-dark {
70
+ /**
71
+ * @tokens Neutral Dark Colors
72
+ * @presenter Color
73
+ */
74
+
46
75
  // Main Scale
47
- --rm-color-neutral-plus-max: var(--rm-color-black);
48
- --rm-color-neutral-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
49
- --rm-color-neutral-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
50
- --rm-color-neutral-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 12%);
51
- --rm-color-neutral-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 14%);
52
- --rm-color-neutral-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
53
- --rm-color-neutral-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
54
- --rm-color-neutral-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 24%);
55
- --rm-color-neutral-plus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 28%);
56
- --rm-color-neutral-base: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 32%);
57
- --rm-color-neutral-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 36%);
58
- --rm-color-neutral-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 40%);
59
- --rm-color-neutral-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 48%);
60
- --rm-color-neutral-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 52%);
61
- --rm-color-neutral-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 64%);
62
- --rm-color-neutral-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
63
- --rm-color-neutral-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
64
- --rm-color-neutral-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
65
- --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%);
66
95
 
67
96
  // On Scale
68
- --rm-color-neutral-on-plus-max: var(--rm-color-white);
69
- --rm-color-neutral-on-plus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
70
- --rm-color-neutral-on-plus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
71
- --rm-color-neutral-on-plus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
72
- --rm-color-neutral-on-plus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 72%);
73
- --rm-color-neutral-on-plus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 80%);
74
- --rm-color-neutral-on-plus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
75
- --rm-color-neutral-on-plus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 88%);
76
- --rm-color-neutral-on-plus-one: var(--rm-color-white);
77
- --rm-color-neutral-on-base: var(--rm-color-white);
78
- --rm-color-neutral-on-minus-one: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
79
- --rm-color-neutral-on-minus-two: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 90%);
80
- --rm-color-neutral-on-minus-three: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 86%);
81
- --rm-color-neutral-on-minus-four: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 84%);
82
- --rm-color-neutral-on-minus-five: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 20%);
83
- --rm-color-neutral-on-minus-six: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 16%);
84
- --rm-color-neutral-on-minus-seven: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 8%);
85
- --rm-color-neutral-on-minus-eight: hsl(var(--rm-color-neutral-h) var(--rm-color-neutral-s) 4%);
86
- --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%);
87
135
  }
88
136
 
89
137
  @mixin alerts-warning-semantic-scale-dark {
138
+ /**
139
+ * @tokens Alerts Warning Dark Colors
140
+ * @presenter Color
141
+ */
142
+
90
143
  // Main Scale
91
- --rm-color-alerts-warning-plus-max: var(--rm-color-black);
92
- --rm-color-alerts-warning-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
93
- --rm-color-alerts-warning-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
94
- --rm-color-alerts-warning-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 12%);
95
- --rm-color-alerts-warning-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 14%);
96
- --rm-color-alerts-warning-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
97
- --rm-color-alerts-warning-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
98
- --rm-color-alerts-warning-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 24%);
99
- --rm-color-alerts-warning-plus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 28%);
100
- --rm-color-alerts-warning-base: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 32%);
101
- --rm-color-alerts-warning-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 36%);
102
- --rm-color-alerts-warning-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 40%);
103
- --rm-color-alerts-warning-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 48%);
104
- --rm-color-alerts-warning-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 52%);
105
- --rm-color-alerts-warning-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 64%);
106
- --rm-color-alerts-warning-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
107
- --rm-color-alerts-warning-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
108
- --rm-color-alerts-warning-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
109
- --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%);
110
163
 
111
164
  // On Scale
112
- --rm-color-alerts-warning-on-plus-max: var(--rm-color-white);
113
- --rm-color-alerts-warning-on-plus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
114
- --rm-color-alerts-warning-on-plus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
115
- --rm-color-alerts-warning-on-plus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
116
- --rm-color-alerts-warning-on-plus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 72%);
117
- --rm-color-alerts-warning-on-plus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 80%);
118
- --rm-color-alerts-warning-on-plus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
119
- --rm-color-alerts-warning-on-plus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 88%);
120
- --rm-color-alerts-warning-on-plus-one: var(--rm-color-white);
121
- --rm-color-alerts-warning-on-base: var(--rm-color-white);
122
- --rm-color-alerts-warning-on-minus-one: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
123
- --rm-color-alerts-warning-on-minus-two: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 90%);
124
- --rm-color-alerts-warning-on-minus-three: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 86%);
125
- --rm-color-alerts-warning-on-minus-four: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 84%);
126
- --rm-color-alerts-warning-on-minus-five: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 20%);
127
- --rm-color-alerts-warning-on-minus-six: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 16%);
128
- --rm-color-alerts-warning-on-minus-seven: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 8%);
129
- --rm-color-alerts-warning-on-minus-eight: hsl(var(--rm-color-alerts-warning-h) var(--rm-color-alerts-warning-s) 4%);
130
- --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
+ );
131
231
  }
132
232
 
133
233
  @mixin alerts-danger-semantic-scale-dark {
234
+ /**
235
+ * @tokens Alerts Danger Dark Colors
236
+ * @presenter Color
237
+ */
238
+
134
239
  // Main Scale
135
- --rm-color-alerts-danger-plus-max: var(--rm-color-black);
136
- --rm-color-alerts-danger-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
137
- --rm-color-alerts-danger-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
138
- --rm-color-alerts-danger-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 12%);
139
- --rm-color-alerts-danger-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 14%);
140
- --rm-color-alerts-danger-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
141
- --rm-color-alerts-danger-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
142
- --rm-color-alerts-danger-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 24%);
143
- --rm-color-alerts-danger-plus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 28%);
144
- --rm-color-alerts-danger-base: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 32%);
145
- --rm-color-alerts-danger-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 36%);
146
- --rm-color-alerts-danger-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 40%);
147
- --rm-color-alerts-danger-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 48%);
148
- --rm-color-alerts-danger-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 52%);
149
- --rm-color-alerts-danger-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 64%);
150
- --rm-color-alerts-danger-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
151
- --rm-color-alerts-danger-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
152
- --rm-color-alerts-danger-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
153
- --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%);
154
259
 
155
260
  // On Scale
156
- --rm-color-alerts-danger-on-plus-max: var(--rm-color-white);
157
- --rm-color-alerts-danger-on-plus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
158
- --rm-color-alerts-danger-on-plus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
159
- --rm-color-alerts-danger-on-plus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
160
- --rm-color-alerts-danger-on-plus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 72%);
161
- --rm-color-alerts-danger-on-plus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 80%);
162
- --rm-color-alerts-danger-on-plus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
163
- --rm-color-alerts-danger-on-plus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 88%);
164
- --rm-color-alerts-danger-on-plus-one: var(--rm-color-white);
165
- --rm-color-alerts-danger-on-base: var(--rm-color-white);
166
- --rm-color-alerts-danger-on-minus-one: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
167
- --rm-color-alerts-danger-on-minus-two: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 90%);
168
- --rm-color-alerts-danger-on-minus-three: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 86%);
169
- --rm-color-alerts-danger-on-minus-four: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 84%);
170
- --rm-color-alerts-danger-on-minus-five: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 20%);
171
- --rm-color-alerts-danger-on-minus-six: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 16%);
172
- --rm-color-alerts-danger-on-minus-seven: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 8%);
173
- --rm-color-alerts-danger-on-minus-eight: hsl(var(--rm-color-alerts-danger-h) var(--rm-color-alerts-danger-s) 4%);
174
- --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%);
175
299
  }
176
300
 
177
301
  @mixin alerts-info-semantic-scale-dark {
302
+ /**
303
+ * @tokens Alerts Info Dark Colors
304
+ * @presenter Color
305
+ */
306
+
178
307
  // Main Scale
179
- --rm-color-alerts-info-plus-max: var(--rm-color-black);
180
- --rm-color-alerts-info-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
181
- --rm-color-alerts-info-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
182
- --rm-color-alerts-info-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 12%);
183
- --rm-color-alerts-info-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 14%);
184
- --rm-color-alerts-info-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
185
- --rm-color-alerts-info-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
186
- --rm-color-alerts-info-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 24%);
187
- --rm-color-alerts-info-plus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 28%);
188
- --rm-color-alerts-info-base: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 32%);
189
- --rm-color-alerts-info-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 36%);
190
- --rm-color-alerts-info-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 40%);
191
- --rm-color-alerts-info-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 48%);
192
- --rm-color-alerts-info-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 52%);
193
- --rm-color-alerts-info-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 64%);
194
- --rm-color-alerts-info-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
195
- --rm-color-alerts-info-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
196
- --rm-color-alerts-info-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
197
- --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%);
198
327
 
199
328
  // On Scale
200
- --rm-color-alerts-info-on-plus-max: var(--rm-color-white);
201
- --rm-color-alerts-info-on-plus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
202
- --rm-color-alerts-info-on-plus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
203
- --rm-color-alerts-info-on-plus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
204
- --rm-color-alerts-info-on-plus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 72%);
205
- --rm-color-alerts-info-on-plus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 80%);
206
- --rm-color-alerts-info-on-plus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
207
- --rm-color-alerts-info-on-plus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 88%);
208
- --rm-color-alerts-info-on-plus-one: var(--rm-color-white);
209
- --rm-color-alerts-info-on-base: var(--rm-color-white);
210
- --rm-color-alerts-info-on-minus-one: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
211
- --rm-color-alerts-info-on-minus-two: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 90%);
212
- --rm-color-alerts-info-on-minus-three: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 86%);
213
- --rm-color-alerts-info-on-minus-four: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 84%);
214
- --rm-color-alerts-info-on-minus-five: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 20%);
215
- --rm-color-alerts-info-on-minus-six: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 16%);
216
- --rm-color-alerts-info-on-minus-seven: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 8%);
217
- --rm-color-alerts-info-on-minus-eight: hsl(var(--rm-color-alerts-info-h) var(--rm-color-alerts-info-s) 4%);
218
- --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%);
219
367
  }
220
368
 
221
369
  @mixin alerts-notice-semantic-scale-dark {
370
+ /**
371
+ * @tokens Alerts Notice Dark Colors
372
+ * @presenter Color
373
+ */
374
+
222
375
  // Main Scale
223
- --rm-color-alerts-notice-plus-max: var(--rm-color-black);
224
- --rm-color-alerts-notice-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
225
- --rm-color-alerts-notice-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
226
- --rm-color-alerts-notice-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 12%);
227
- --rm-color-alerts-notice-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 14%);
228
- --rm-color-alerts-notice-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
229
- --rm-color-alerts-notice-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
230
- --rm-color-alerts-notice-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 24%);
231
- --rm-color-alerts-notice-plus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 28%);
232
- --rm-color-alerts-notice-base: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 32%);
233
- --rm-color-alerts-notice-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 36%);
234
- --rm-color-alerts-notice-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 40%);
235
- --rm-color-alerts-notice-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 48%);
236
- --rm-color-alerts-notice-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 52%);
237
- --rm-color-alerts-notice-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 64%);
238
- --rm-color-alerts-notice-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
239
- --rm-color-alerts-notice-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
240
- --rm-color-alerts-notice-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
241
- --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%);
242
395
 
243
396
  // On Scale
244
- --rm-color-alerts-notice-on-plus-max: var(--rm-color-white);
245
- --rm-color-alerts-notice-on-plus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
246
- --rm-color-alerts-notice-on-plus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
247
- --rm-color-alerts-notice-on-plus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
248
- --rm-color-alerts-notice-on-plus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 72%);
249
- --rm-color-alerts-notice-on-plus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 80%);
250
- --rm-color-alerts-notice-on-plus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
251
- --rm-color-alerts-notice-on-plus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 88%);
252
- --rm-color-alerts-notice-on-plus-one: var(--rm-color-white);
253
- --rm-color-alerts-notice-on-base: var(--rm-color-white);
254
- --rm-color-alerts-notice-on-minus-one: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
255
- --rm-color-alerts-notice-on-minus-two: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 90%);
256
- --rm-color-alerts-notice-on-minus-three: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 86%);
257
- --rm-color-alerts-notice-on-minus-four: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 84%);
258
- --rm-color-alerts-notice-on-minus-five: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 20%);
259
- --rm-color-alerts-notice-on-minus-six: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 16%);
260
- --rm-color-alerts-notice-on-minus-seven: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 8%);
261
- --rm-color-alerts-notice-on-minus-eight: hsl(var(--rm-color-alerts-notice-h) var(--rm-color-alerts-notice-s) 4%);
262
- --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%);
263
435
  }
264
436
 
265
437
  @mixin shadows-dark {
266
- --rm-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
267
- --rm-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
268
- --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
269
- --rm-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
270
- --rm-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
271
- }
272
-
273
- @mixin modal-dark {
274
- .modal__content {
275
- background: var(--rm-color-neutral-plus-seven);
276
- color: var(--rm-color-neutral-on-plus-seven);
277
- }
278
-
279
- .modal__close {
280
- &:hover {
281
- background: var(--rm-color-background);
282
- }
283
- }
284
- }
285
-
286
- @mixin panel-dark {
287
- .panel {
288
- background: var(--rm-color-neutral-plus-seven);
289
- color: var(--rm-color-neutral-on-plus-seven);
290
- }
291
-
292
- .panel__close {
293
- &:hover {
294
- background: var(--rm-color-background);
295
- }
296
- }
438
+ /**
439
+ * @tokens Dark Shadows
440
+ * @presenter Shadow
441
+ */
442
+ --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
443
+ --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
444
+ --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
445
+ --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
446
+ --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
297
447
  }
298
448
 
299
449
  @mixin all-tokens-dark {
@@ -306,9 +456,6 @@
306
456
  @include alerts-notice-semantic-scale-dark;
307
457
 
308
458
  @include shadows-dark;
309
-
310
- @include modal-dark;
311
- @include panel-dark;
312
459
  }
313
460
 
314
461
  // Follow system preference unless forced to light