|
10 | 10 | text-align: start; |
11 | 11 | transition: 50ms ease-in; |
12 | 12 | transition-property: background-color, color, border-color, opacity; |
13 | | - background: var(--control-background-secondary-default); |
| 13 | + background: var(--control-secondary-background-default, var(--control-background-secondary-default)); |
14 | 14 | color: var(--text-default); |
15 | 15 | white-space: nowrap; |
16 | 16 |
|
|
26 | 26 |
|
27 | 27 | &:focus-visible { |
28 | 28 | /* stylelint-disable-next-line custom-property-pattern */ |
29 | | - box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4)); |
| 29 | + box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4))); |
30 | 30 | } |
31 | 31 | } |
32 | 32 |
|
|
63 | 63 | } |
64 | 64 |
|
65 | 65 | .vc-btn-primary { |
66 | | - background-color: var(--control-background-primary-default); |
67 | | - border-color: var(--control-border-primary-default); |
68 | | - color: var(--control-text-primary-default); |
| 66 | + background-color: var(--control-primary-background-default, var(--control-background-primary-default)); |
| 67 | + border-color: var(--control-primary-border-default, var(--control-border-primary-default)); |
| 68 | + color: var(--control-primary-text-default, var(--control-text-primary-default)); |
69 | 69 |
|
70 | 70 | &:hover { |
71 | | - background-color: var(--control-background-primary-hover); |
72 | | - border-color: var(--control-border-primary-hover); |
73 | | - color: var(--control-text-primary-hover); |
| 71 | + background-color: var(--control-primary-background-hover, var(--control-background-primary-hover)); |
| 72 | + border-color: var(--control-primary-border-hover, var(--control-border-primary-hover)); |
| 73 | + color: var(--control-primary-text-hover, var(--control-text-primary-hover)); |
74 | 74 | } |
75 | 75 | } |
76 | 76 |
|
77 | 77 | .vc-btn-secondary, |
78 | 78 | .vc-btn-link { |
79 | | - background-color: var(--control-background-secondary-default); |
80 | | - border-color: var(--control-border-secondary-default); |
81 | | - color: var(--control-text-secondary-default); |
| 79 | + background-color: var(--control-secondary-background-default, var(--control-background-secondary-default)); |
| 80 | + border-color: var(--control-secondary-border-default, var(--control-border-secondary-default)); |
| 81 | + color: var(--control-secondary-text-default, var(--control-text-secondary-default)); |
82 | 82 |
|
83 | 83 | &:hover { |
84 | | - background-color: var(--control-background-secondary-hover); |
85 | | - border-color: var(--control-border-secondary-hover); |
86 | | - color: var(--control-text-secondary-hover); |
| 84 | + background-color: var(--control-secondary-background-hover, var(--control-background-secondary-hover)); |
| 85 | + border-color: var(--control-secondary-border-hover, var(--control-border-secondary-hover)); |
| 86 | + color: var(--control-secondary-text-hover, var(--control-text-secondary-hover)); |
87 | 87 | } |
88 | 88 | } |
89 | 89 |
|
90 | 90 | .vc-btn-dangerPrimary { |
91 | | - background-color: var(--control-background-critical-primary-default); |
92 | | - border-color: var(--control-border-critical-primary-default); |
93 | | - color: var(--control-text-critical-primary-default); |
| 91 | + background-color: var(--control-critical-primary-background-default, var(--control-background-critical-primary-default)); |
| 92 | + border-color: var(--control-critical-primary-border-default, var(--control-border-critical-primary-default)); |
| 93 | + color: var(--control-critical-primary-text-default, var(--control-text-critical-primary-default)); |
94 | 94 |
|
95 | 95 | &:hover { |
96 | | - background-color: var(--control-background-critical-primary-hover); |
97 | | - border-color: var(--control-border-critical-primary-hover); |
98 | | - color: var(--control-text-critical-primary-hover); |
| 96 | + background-color: var(--control-critical-primary-background-hover, var(--control-background-critical-primary-hover)); |
| 97 | + border-color: var(--control-critical-primary-border-hover, var(--control-border-critical-primary-hover)); |
| 98 | + color: var(--control-critical-primary-text-hover, var(--control-text-critical-primary-hover)); |
99 | 99 | } |
100 | 100 | } |
101 | 101 |
|
102 | 102 | .vc-btn-dangerSecondary { |
103 | | - background-color: var(--control-background-critical-secondary-default); |
104 | | - border-color: var(--control-border-critical-secondary-default); |
105 | | - color: var(--control-text-critical-secondary-default); |
| 103 | + background-color: var(--control-critical-secondary-background-default, var(--control-background-critical-secondary-default)); |
| 104 | + border-color: var(--control-critical-secondary-border-default, var(--control-border-critical-secondary-default)); |
| 105 | + color: var(--control-critical-secondary-text-default, var(--control-text-critical-secondary-default)); |
106 | 106 |
|
107 | 107 | &:hover { |
108 | | - background-color: var(--control-background-critical-secondary-hover); |
109 | | - border-color: var(--control-border-critical-secondary-hover); |
110 | | - color: var(--control-text-critical-secondary-hover); |
| 108 | + background-color: var(--control-critical-secondary-background-hover, var(--control-background-critical-secondary-hover)); |
| 109 | + border-color: var(--control-critical-secondary-border-hover, var(--control-border-critical-secondary-hover)); |
| 110 | + color: var(--control-critical-secondary-text-hover, var(--control-text-critical-secondary-hover)); |
111 | 111 | } |
112 | 112 | } |
113 | 113 |
|
114 | 114 | .vc-btn-overlayPrimary { |
115 | | - background-color: var(--control-background-overlay-primary-default); |
116 | | - border-color: var(--control-border-overlay-primary-default); |
117 | | - color: var(--control-text-overlay-primary-default); |
| 115 | + background-color: var(--control-overlay-primary-background-default, var(--control-background-overlay-primary-default)); |
| 116 | + border-color: var(--control-overlay-primary-border-default, var(--control-border-overlay-primary-default)); |
| 117 | + color: var(--control-overlay-primary-text-default, var(--control-text-overlay-primary-default)); |
118 | 118 |
|
119 | 119 | &:hover { |
120 | | - background-color: var(--control-background-overlay-primary-hover); |
121 | | - border-color: var(--control-border-overlay-primary-hover); |
122 | | - color: var(--control-text-overlay-primary-hover); |
| 120 | + background-color: var(--control-overlay-primary-background-hover, var(--control-background-overlay-primary-hover)); |
| 121 | + border-color: var(--control-overlay-primary-border-hover, var(--control-border-overlay-primary-hover)); |
| 122 | + color: var(--control-overlay-primary-text-hover, var(--control-text-overlay-primary-hover)); |
123 | 123 | } |
124 | 124 | } |
125 | 125 |
|
126 | 126 | .vc-btn-positive { |
127 | | - background-color: var(--button-positive-background); |
128 | | - border-color: var(--button-positive-border); |
| 127 | + background-color: var(--redesign-button-positive-background, var(--button-positive-background)); |
129 | 128 | color: var(--white); |
130 | 129 |
|
131 | 130 | &:hover { |
132 | | - background-color: var(--button-positive-background-hover); |
| 131 | + background-color: var(--redesign-button-positive-pressed-background, var(--button-positive-background-hover)); |
133 | 132 | } |
134 | 133 | } |
135 | 134 |
|
136 | 135 | .vc-btn-none { |
137 | 136 | background-color: transparent; |
138 | 137 | border-color: transparent; |
139 | | - color: var(--control-icon-icon-only-default); |
| 138 | + color: var(--control-icon-only-icon-default, var(--control-icon-icon-only-default)); |
140 | 139 |
|
141 | 140 | &:hover { |
142 | | - background-color: var(--control-background-icon-only-hover); |
143 | | - border-color: var(--control-border-icon-only-hover); |
144 | | - color: var(--control-icon-icon-only-hover); |
| 141 | + background-color: var(--control-icon-only-background-hover, var(--control-background-icon-only-hover)); |
| 142 | + border-color: var(--control-icon-only-border-hover, var(--control-border-icon-only-hover)); |
| 143 | + color: var(--control-icon-only-icon-hover, var(--control-icon-icon-only-hover)); |
145 | 144 | } |
146 | 145 | } |
147 | 146 |
|
|
178 | 177 |
|
179 | 178 | &:focus-visible { |
180 | 179 | /* stylelint-disable-next-line custom-property-pattern */ |
181 | | - box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4)); |
| 180 | + box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--border-focus, var(--focus-primary, #00b0f4))); |
182 | 181 | } |
183 | 182 | } |
184 | 183 |
|
|
187 | 186 | } |
188 | 187 |
|
189 | 188 | .vc-text-btn-secondary { |
190 | | - color: var(--text-primary); |
| 189 | + color: var(--text-strong, var(--text-default)); |
191 | 190 | } |
192 | 191 |
|
193 | 192 | .vc-text-btn-danger { |
|
0 commit comments