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