sdga-ui 1.0.7 → 1.0.8

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 (33) hide show
  1. package/css/dga-ui.css +24869 -27624
  2. package/css/dga-ui.css.map +1 -1
  3. package/demo-angular/angular.json +3 -0
  4. package/demo-angular/package.json +2 -2
  5. package/demo-angular/src/app/app.html +1 -1
  6. package/demo-angular/src/app/app.routes.ts +0 -4
  7. package/demo-angular/src/app/app.ts +5 -2
  8. package/demo-angular/src/app/shared/code-example/code-example.component.html +1 -1
  9. package/demo-angular/src/app/shared/code-example/code-example.component.ts +12 -1
  10. package/demo-angular/src/app/views/buttons/buttons.component.html +95 -24
  11. package/demo-angular/src/app/views/buttons/buttons.component.scss +0 -3
  12. package/demo-angular/src/app/views/buttons/buttons.component.ts +77 -7
  13. package/demo-angular/src/app/views/footer/footer.html +138 -150
  14. package/demo-angular/src/app/views/footer/footer.ts +200 -66
  15. package/demo-angular/src/app/views/links/links.component.ts +1 -1
  16. package/demo-angular/tsconfig.app.json +2 -1
  17. package/package.json +1 -1
  18. package/theme/_variables.scss +0 -1
  19. package/theme/components/_buttons.scss +1 -302
  20. package/theme/config/_base.scss +1 -1
  21. package/theme/customizations/_alerts.scss +15 -14
  22. package/theme/customizations/_buttons.scss +305 -244
  23. package/theme/customizations/_footer.scss +122 -45
  24. package/theme/customizations/_global.scss +20 -2
  25. package/theme/customizations/_links.scss +45 -44
  26. package/theme/customizations/_toasts.scss +13 -14
  27. package/theme/dga-ui.scss +1 -2
  28. package/demo-angular/src/app/views/contexts/contexts.component.html +0 -204
  29. package/demo-angular/src/app/views/contexts/contexts.component.ts +0 -10
  30. package/demo-angular/src/app/views/footer/footer.scss +0 -0
  31. package/demo-angular/src/app/views/footer/footer.spec.ts +0 -23
  32. package/theme/config/_contexts.scss +0 -471
  33. package/theme/customizations/_contexts.scss +0 -432
package/theme/customizations/_buttons.scss CHANGED
@@ -9,256 +9,315 @@
9
9
 
10
10
  // Define button variants with their CSS custom properties
11
11
  $button-variants: (
12
+ "neutral": (
13
+ color: $white,
14
+ bg: $neutral-950,
15
+ border-color: $neutral-950,
16
+ hover-color: $white,
17
+ hover-bg: $neutral-800,
18
+ hover-border-color: $neutral-800,
19
+ active-color: $white,
20
+ active-bg: $neutral-600,
21
+ active-border-color: $neutral-600,
22
+ disabled-color: $neutral-400,
23
+ disabled-bg: $neutral-200,
24
+ disabled-border-color: $neutral-200
25
+ ),
12
26
  "primary": (
13
- color: $btn-primary-color,
14
- bg: $btn-primary-bg,
15
- border-color: $btn-primary-border-color,
16
- hover-color: $btn-primary-hover-color,
17
- hover-bg: $btn-primary-hover-bg,
18
- hover-border-color: $btn-primary-hover-border-color,
19
- focus-shadow-rgb: $btn-primary-focus-shadow-rgb,
20
- active-color: $btn-primary-active-color,
21
- active-bg: $btn-primary-active-bg,
22
- active-border-color: $btn-primary-active-border-color,
23
- disabled-color: $btn-primary-disabled-color,
24
- disabled-bg: $btn-primary-disabled-bg,
25
- disabled-border-color: $btn-primary-disabled-border-color
27
+ color: $white,
28
+ bg: $primary-600,
29
+ border-color: $primary-600,
30
+ hover-color: $white,
31
+ hover-bg: $primary-700,
32
+ hover-border-color: $primary-700,
33
+ active-color: $white,
34
+ active-bg: $primary-800,
35
+ active-border-color: $primary-800,
36
+ disabled-color: $white,
37
+ disabled-bg: $primary-200,
38
+ disabled-border-color: $primary-200
26
39
  ),
27
40
  "secondary": (
28
- color: $btn-secondary-color,
29
- bg: $btn-secondary-bg,
30
- border-color: $btn-secondary-border-color,
31
- hover-color: $btn-secondary-hover-color,
32
- hover-bg: $btn-secondary-hover-bg,
33
- hover-border-color: $btn-secondary-hover-border-color,
34
- focus-shadow-rgb: $btn-secondary-focus-shadow-rgb,
35
- active-color: $btn-secondary-active-color,
36
- active-bg: $btn-secondary-active-bg,
37
- active-border-color: $btn-secondary-active-border-color,
38
- disabled-color: $btn-secondary-disabled-color,
39
- disabled-bg: $btn-secondary-disabled-bg,
40
- disabled-border-color: $btn-secondary-disabled-border-color
41
+ color: $black,
42
+ bg: $secondary-100,
43
+ border-color: $secondary-100,
44
+ hover-color: $black,
45
+ hover-bg: $secondary-200,
46
+ hover-border-color: $secondary-200,
47
+ active-color: $black,
48
+ active-bg: $secondary-200,
49
+ active-border-color: $secondary-200,
50
+ disabled-color: $secondary-400,
51
+ disabled-bg: $secondary-200,
52
+ disabled-border-color: $secondary-200
41
53
  ),
42
- "danger": (
43
- color: $btn-danger-color,
44
- bg: $btn-danger-bg,
45
- border-color: $btn-danger-border-color,
46
- hover-color: $btn-danger-hover-color,
47
- hover-bg: $btn-danger-hover-bg,
48
- hover-border-color: $btn-danger-hover-border-color,
49
- focus-shadow-rgb: $btn-danger-focus-shadow-rgb,
50
- active-color: $btn-danger-active-color,
51
- active-bg: $btn-danger-active-bg,
52
- active-border-color: $btn-danger-active-border-color,
53
- disabled-color: $btn-danger-disabled-color,
54
- disabled-bg: $btn-danger-disabled-bg,
55
- disabled-border-color: $btn-danger-disabled-border-color
54
+ "outline-secondary": (
55
+ color: $black,
56
+ border-color: $secondary-300,
57
+ hover-color: $black,
58
+ hover-bg: $secondary-100,
59
+ hover-border-color: $secondary-200,
60
+ active-color: $black,
61
+ active-bg: $secondary-200,
62
+ active-border-color: $secondary-300,
63
+ disabled-color: $secondary-400,
64
+ disabled-bg: transparent,
65
+ disabled-border-color: $secondary-400
56
66
  ),
57
- "success": (
58
- color: $btn-success-color,
59
- bg: $btn-success-bg,
60
- border-color: $btn-success-border-color,
61
- hover-color: $btn-success-hover-color,
62
- hover-bg: $btn-success-hover-bg,
63
- hover-border-color: $btn-success-hover-border-color,
64
- focus-shadow-rgb: $btn-success-focus-shadow-rgb,
65
- active-color: $btn-success-active-color,
66
- active-bg: $btn-success-active-bg,
67
- active-border-color: $btn-success-active-border-color,
68
- disabled-color: $btn-success-disabled-color,
69
- disabled-bg: $btn-success-disabled-bg,
70
- disabled-border-color: $btn-success-disabled-border-color
67
+ "subtle": (
68
+ color: $black,
69
+ bg: transparent,
70
+ border-color: transparent,
71
+ hover-color: $black,
72
+ hover-bg: transparent,
73
+ hover-border-color: transparent,
74
+ active-color: $black,
75
+ active-bg: transparent,
76
+ active-border-color: transparent,
77
+ disabled-color: $neutral-400,
78
+ disabled-bg: transparent,
79
+ disabled-border-color: transparent
71
80
  ),
72
- "warning": (
73
- color: $btn-warning-color,
74
- bg: $btn-warning-bg,
75
- border-color: $btn-warning-border-color,
76
- hover-color: $btn-warning-hover-color,
77
- hover-bg: $btn-warning-hover-bg,
78
- hover-border-color: $btn-warning-hover-border-color,
79
- focus-shadow-rgb: $btn-warning-focus-shadow-rgb,
80
- active-color: $btn-warning-active-color,
81
- active-bg: $btn-warning-active-bg,
82
- active-border-color: $btn-warning-active-border-color,
83
- disabled-color: $btn-warning-disabled-color,
84
- disabled-bg: $btn-warning-disabled-bg,
85
- disabled-border-color: $btn-warning-disabled-border-color
81
+ "transparent": (
82
+ color: $black,
83
+ bg: transparent,
84
+ border-color: transparent,
85
+ hover-color: $primary-700,
86
+ hover-bg: transparent,
87
+ hover-border-color: transparent,
88
+ active-color: $primary-900,
89
+ active-bg: transparent,
90
+ active-border-color: transparent,
91
+ disabled-color: $neutral-400,
92
+ disabled-bg: transparent,
93
+ disabled-border-color: transparent
86
94
  ),
87
- "info": (
88
- color: $btn-info-color,
89
- bg: $btn-info-bg,
90
- border-color: $btn-info-border-color,
91
- hover-color: $btn-info-hover-color,
92
- hover-bg: $btn-info-hover-bg,
93
- hover-border-color: $btn-info-hover-border-color,
94
- focus-shadow-rgb: $btn-info-focus-shadow-rgb,
95
- active-color: $btn-info-active-color,
96
- active-bg: $btn-info-active-bg,
97
- active-border-color: $btn-info-active-border-color,
98
- disabled-color: $btn-info-disabled-color,
99
- disabled-bg: $btn-info-disabled-bg,
100
- disabled-border-color: $btn-info-disabled-border-color
95
+ "destructive-primary": (
96
+ color: $white,
97
+ bg: $error-600,
98
+ border-color: transparent,
99
+ hover-color: $white,
100
+ hover-bg: $error-700,
101
+ hover-border-color: transparent,
102
+ active-color: $white,
103
+ active-bg: $error-900,
104
+ active-border-color: transparent,
105
+ disabled-color: $neutral-400,
106
+ disabled-bg: transparent,
107
+ disabled-border-color: transparent
101
108
  ),
102
- "lavender": (
103
- color: $btn-lavender-color,
104
- bg: $btn-lavender-bg,
105
- border-color: $btn-lavender-border-color,
106
- hover-color: $btn-lavender-hover-color,
107
- hover-bg: $btn-lavender-hover-bg,
108
- hover-border-color: $btn-lavender-hover-border-color,
109
- focus-shadow-rgb: $btn-lavender-focus-shadow-rgb,
110
- active-color: $btn-lavender-active-color,
111
- active-bg: $btn-lavender-active-bg,
112
- active-border-color: $btn-lavender-active-border-color,
113
- disabled-color: $btn-lavender-disabled-color,
114
- disabled-bg: $btn-lavender-disabled-bg,
115
- disabled-border-color: $btn-lavender-disabled-border-color
109
+ "destructive-secondary": (
110
+ color: $error-700,
111
+ bg: $error-50,
112
+ border-color: transparent,
113
+ hover-color: $error-700,
114
+ hover-bg: $error-100,
115
+ hover-border-color: transparent,
116
+ active-color: $error-700,
117
+ active-bg: $error-200,
118
+ active-border-color: transparent,
119
+ disabled-color: $neutral-400,
120
+ disabled-bg: transparent,
121
+ disabled-border-color: transparent
116
122
  ),
117
- "neutral": (
118
- color: $btn-neutral-color,
119
- bg: $btn-neutral-bg,
120
- border-color: $btn-neutral-border-color,
121
- hover-color: $btn-neutral-hover-color,
122
- hover-bg: $btn-neutral-hover-bg,
123
- hover-border-color: $btn-neutral-hover-border-color,
124
- focus-shadow-rgb: $btn-neutral-focus-shadow-rgb,
125
- active-color: $btn-neutral-active-color,
126
- active-bg: $btn-neutral-active-bg,
127
- active-border-color: $btn-neutral-active-border-color,
128
- disabled-color: $btn-neutral-disabled-color,
129
- disabled-bg: $btn-neutral-disabled-bg,
130
- disabled-border-color: $btn-neutral-disabled-border-color
123
+ "destructive-outline-secondary": (
124
+ color: $error-700,
125
+ bg: transparent,
126
+ border-color: $error-200,
127
+ hover-color: $error-700,
128
+ hover-bg: $error-100,
129
+ hover-border-color: $error-100,
130
+ active-color: $error-700,
131
+ active-bg: $error-200,
132
+ active-border-color: transparent,
133
+ disabled-color: $neutral-400,
134
+ disabled-bg: transparent,
135
+ disabled-border-color: transparent
131
136
  ),
132
- "subtle": (
133
- color: $btn-subtle-color,
137
+ "destructive-subtle": (
138
+ color: $error-700,
139
+ bg: transparent,
140
+ border-color: transparent,
141
+ hover-color: $error-700,
142
+ hover-bg: $error-100,
143
+ hover-border-color: transparent,
144
+ active-color: $error-700,
145
+ active-bg: $error-200,
146
+ active-border-color: transparent,
147
+ disabled-color: $neutral-400,
148
+ disabled-bg: transparent,
149
+ disabled-border-color: transparent
150
+ ),
151
+ "destructive-transparent": (
152
+ color: $error-600,
134
153
  bg: transparent,
135
- border-color: $btn-subtle-border-color,
136
- hover-color: $btn-subtle-hover-color,
137
- hover-bg: $btn-subtle-hover-bg,
138
- hover-border-color: $btn-subtle-hover-border-color,
139
- focus-shadow-rgb: $btn-subtle-focus-shadow-rgb,
140
- active-color: $btn-subtle-active-color,
141
- active-bg: $btn-subtle-active-bg,
142
- active-border-color: $btn-subtle-active-border-color,
143
- disabled-color: $btn-subtle-disabled-color,
144
- disabled-bg: $btn-subtle-disabled-bg,
145
- disabled-border-color: $btn-subtle-disabled-border-color
154
+ border-color: transparent,
155
+ hover-color: $error-700,
156
+ hover-bg: transparent,
157
+ hover-border-color: transparent,
158
+ active-color: $error-900,
159
+ active-bg: transparent,
160
+ active-border-color: transparent,
161
+ disabled-color: $neutral-400,
162
+ disabled-bg: transparent,
163
+ disabled-border-color: transparent
146
164
  )
147
165
  );
148
166
 
149
- // Define outline button variants
150
- $button-outline-variants: (
167
+ $on-primary-button-variants: (
168
+ "neutral": (
169
+ color: $black,
170
+ bg: $white,
171
+ border-color: transparent,
172
+ hover-color: $black,
173
+ hover-bg: rgba($white, 0.8),
174
+ hover-border-color: transparent,
175
+ active-color: $black,
176
+ active-bg: rgba($white, 0.6),
177
+ active-border-color: transparent,
178
+ disabled-color: rgba($white, 0.4),
179
+ disabled-bg: rgba($white, 0.2),
180
+ disabled-border-color: transparent
181
+ ),
151
182
  "primary": (
152
- color: $btn-outline-primary-color,
153
- border-color: $btn-outline-primary-border-color,
154
- hover-color: $btn-outline-primary-hover-color,
155
- hover-bg: $btn-outline-primary-hover-bg,
156
- hover-border-color: $btn-outline-primary-hover-border-color,
157
- focus-shadow-rgb: $btn-outline-primary-focus-shadow-rgb,
158
- active-color: $btn-outline-primary-active-color,
159
- active-bg: $btn-outline-primary-active-bg,
160
- active-border-color: $btn-outline-primary-active-border-color,
161
- disabled-color: $btn-outline-primary-disabled-color,
162
- disabled-bg: $btn-outline-primary-disabled-bg,
163
- disabled-border-color: $btn-outline-primary-disabled-border-color
183
+ color: $black,
184
+ bg: $white,
185
+ border-color: transparent,
186
+ hover-color: $black,
187
+ hover-bg: rgba($white, 0.8),
188
+ hover-border-color: transparent,
189
+ active-color: $black,
190
+ active-bg: rgba($white, 0.6),
191
+ active-border-color: transparent,
192
+ disabled-color: rgba($white, 0.4),
193
+ disabled-bg: rgba($white, 0.2),
194
+ disabled-border-color: transparent
164
195
  ),
165
196
  "secondary": (
166
- color: $btn-outline-secondary-color,
167
- border-color: $btn-outline-secondary-border-color,
168
- hover-color: $btn-outline-secondary-hover-color,
169
- hover-bg: $btn-outline-secondary-hover-bg,
170
- hover-border-color: $btn-outline-secondary-hover-border-color,
171
- focus-shadow-rgb: $btn-outline-secondary-focus-shadow-rgb,
172
- active-color: $btn-outline-secondary-active-color,
173
- active-bg: $btn-outline-secondary-active-bg,
174
- active-border-color: $btn-outline-secondary-active-border-color,
175
- disabled-color: $btn-outline-secondary-disabled-color,
176
- disabled-bg: $btn-outline-secondary-disabled-bg,
177
- disabled-border-color: $btn-outline-secondary-disabled-border-color
197
+ color: $white,
198
+ bg: rgba($white, 0.2),
199
+ border-color: transparent,
200
+ hover-color: $white,
201
+ hover-bg: rgba($white, 0.2),
202
+ hover-border-color: transparent,
203
+ active-color: $white,
204
+ active-bg: rgba($white, 0.4),
205
+ active-border-color: transparent,
206
+ disabled-color: rgba($white, 0.4),
207
+ disabled-bg: rgba($white, 0.2),
208
+ disabled-border-color: transparent
178
209
  ),
179
- "danger": (
180
- color: $btn-outline-danger-color,
181
- border-color: $btn-outline-danger-border-color,
182
- hover-color: $btn-outline-danger-hover-color,
183
- hover-bg: $btn-outline-danger-hover-bg,
184
- hover-border-color: $btn-outline-danger-hover-border-color,
185
- focus-shadow-rgb: $btn-outline-danger-focus-shadow-rgb,
186
- active-color: $btn-outline-danger-active-color,
187
- active-bg: $btn-outline-danger-active-bg,
188
- active-border-color: $btn-outline-danger-active-border-color,
189
- disabled-color: $btn-outline-danger-disabled-color,
190
- disabled-bg: $btn-outline-danger-disabled-bg,
191
- disabled-border-color: $btn-outline-danger-disabled-border-color
210
+ "outline-secondary": (
211
+ color: $white,
212
+ bg: transparent,
213
+ border-color: rgba($white, 0.4),
214
+ hover-color: $white,
215
+ hover-bg: rgba($white, 0.2),
216
+ hover-border-color: rgba($white, 0.4),
217
+ active-color: $white,
218
+ active-bg: rgba($white, 0.4),
219
+ active-border-color: rgba($white, 0.4),
220
+ disabled-color: rgba($white, 0.4),
221
+ disabled-bg: transparent,
222
+ disabled-border-color: rgba($white, 0.4)
192
223
  ),
193
- "success": (
194
- color: $btn-outline-success-color,
195
- border-color: $btn-outline-success-border-color,
196
- hover-color: $btn-outline-success-hover-color,
197
- hover-bg: $btn-outline-success-hover-bg,
198
- hover-border-color: $btn-outline-success-hover-border-color,
199
- focus-shadow-rgb: $btn-outline-success-focus-shadow-rgb,
200
- active-color: $btn-outline-success-active-color,
201
- active-bg: $btn-outline-success-active-bg,
202
- active-border-color: $btn-outline-success-active-border-color,
203
- disabled-color: $btn-outline-success-disabled-color,
204
- disabled-bg: $btn-outline-success-disabled-bg,
205
- disabled-border-color: $btn-outline-success-disabled-border-color
224
+ "subtle": (
225
+ color: $white,
226
+ bg: transparent,
227
+ border-color: transparent,
228
+ hover-color: $white,
229
+ hover-bg: rgba($white, 0.2),
230
+ hover-border-color: transparent,
231
+ active-color: $white,
232
+ active-bg: rgba($white, 0.4),
233
+ active-border-color: transparent,
234
+ disabled-color: rgba($white, 0.4),
235
+ disabled-bg: transparent,
236
+ disabled-border-color: transparent
206
237
  ),
207
- "warning": (
208
- color: $btn-outline-warning-color,
209
- border-color: $btn-outline-warning-border-color,
210
- hover-color: $btn-outline-warning-hover-color,
211
- hover-bg: $btn-outline-warning-hover-bg,
212
- hover-border-color: $btn-outline-warning-hover-border-color,
213
- focus-shadow-rgb: $btn-outline-warning-focus-shadow-rgb,
214
- active-color: $btn-outline-warning-active-color,
215
- active-bg: $btn-outline-warning-active-bg,
216
- active-border-color: $btn-outline-warning-active-border-color,
217
- disabled-color: $btn-outline-warning-disabled-color,
218
- disabled-bg: $btn-outline-warning-disabled-bg,
219
- disabled-border-color: $btn-outline-warning-disabled-border-color
238
+ "transparent": (
239
+ color: $white,
240
+ bg: transparent,
241
+ border-color: transparent,
242
+ hover-color: $primary-400,
243
+ hover-bg: transparent,
244
+ hover-border-color: transparent,
245
+ active-color: $primary-300,
246
+ active-bg: transparent,
247
+ active-border-color: transparent,
248
+ disabled-color: rgba($white, 0.4),
249
+ disabled-bg: transparent,
250
+ disabled-border-color: transparent
220
251
  ),
221
- "info": (
222
- color: $btn-outline-info-color,
223
- border-color: $btn-outline-info-border-color,
224
- hover-color: $btn-outline-info-hover-color,
225
- hover-bg: $btn-outline-info-hover-bg,
226
- hover-border-color: $btn-outline-info-hover-border-color,
227
- focus-shadow-rgb: $btn-outline-info-focus-shadow-rgb,
228
- active-color: $btn-outline-info-active-color,
229
- active-bg: $btn-outline-info-active-bg,
230
- active-border-color: $btn-outline-info-active-border-color,
231
- disabled-color: $btn-outline-info-disabled-color,
232
- disabled-bg: $btn-outline-info-disabled-bg,
233
- disabled-border-color: $btn-outline-info-disabled-border-color
252
+ "destructive-primary": (
253
+ color: $white,
254
+ bg: $error-600,
255
+ border-color: transparent,
256
+ hover-color: $white,
257
+ hover-bg: $error-700,
258
+ hover-border-color: transparent,
259
+ active-color: $white,
260
+ active-bg: $error-900,
261
+ active-border-color: transparent,
262
+ disabled-color: rgba($white, 0.4),
263
+ disabled-bg: rgba($error-600, 0.2),
264
+ disabled-border-color: transparent
234
265
  ),
235
- "lavender": (
236
- color: $btn-outline-lavender-color,
237
- border-color: $btn-outline-lavender-border-color,
238
- hover-color: $btn-outline-lavender-hover-color,
239
- hover-bg: $btn-outline-lavender-hover-bg,
240
- hover-border-color: $btn-outline-lavender-hover-border-color,
241
- focus-shadow-rgb: $btn-outline-lavender-focus-shadow-rgb,
242
- active-color: $btn-outline-lavender-active-color,
243
- active-bg: $btn-outline-lavender-active-bg,
244
- active-border-color: $btn-outline-lavender-active-border-color,
245
- disabled-color: $btn-outline-lavender-disabled-color,
246
- disabled-bg: $btn-outline-lavender-disabled-bg,
247
- disabled-border-color: $btn-outline-lavender-disabled-border-color
266
+ "destructive-secondary": (
267
+ color: $error-700,
268
+ bg: $error-50,
269
+ border-color: transparent,
270
+ hover-color: $error-700,
271
+ hover-bg: $error-100,
272
+ hover-border-color: transparent,
273
+ active-color: $error-700,
274
+ active-bg: $error-200,
275
+ active-border-color: transparent,
276
+ disabled-color: rgba($error-700, 0.4),
277
+ disabled-bg: rgba($error-50, 0.2),
278
+ disabled-border-color: transparent
248
279
  ),
249
- "neutral": (
250
- color: $btn-outline-neutral-color,
251
- border-color: $btn-outline-neutral-border-color,
252
- hover-color: $btn-outline-neutral-hover-color,
253
- hover-bg: $btn-outline-neutral-hover-bg,
254
- hover-border-color: $btn-outline-neutral-hover-border-color,
255
- focus-shadow-rgb: $btn-outline-neutral-focus-shadow-rgb,
256
- active-color: $btn-outline-neutral-active-color,
257
- active-bg: $btn-outline-neutral-active-bg,
258
- active-border-color: $btn-outline-neutral-active-border-color,
259
- disabled-color: $btn-outline-neutral-disabled-color,
260
- disabled-bg: $btn-outline-neutral-disabled-bg,
261
- disabled-border-color: $btn-outline-neutral-disabled-border-color
280
+ "destructive-outline-secondary": (
281
+ color: $error-200,
282
+ bg: transparent,
283
+ border-color: $error-200,
284
+ hover-color: $error-700,
285
+ hover-bg: $error-100,
286
+ hover-border-color: $error-200,
287
+ active-color: $error-700,
288
+ active-bg: $error-200,
289
+ active-border-color: $error-200,
290
+ disabled-color: rgba($error-700, 0.4),
291
+ disabled-bg: transparent,
292
+ disabled-border-color: rgba($error-200, 0.4)
293
+ ),
294
+ "destructive-subtle": (
295
+ color: $error-200,
296
+ bg: transparent,
297
+ border-color: transparent,
298
+ hover-color: $error-700,
299
+ hover-bg: $error-100,
300
+ hover-border-color: transparent,
301
+ active-color: $error-700,
302
+ active-bg: $error-200,
303
+ active-border-color: transparent,
304
+ disabled-color: rgba($error-200, 0.4),
305
+ disabled-bg: transparent,
306
+ disabled-border-color: transparent
307
+ ),
308
+ "destructive-transparent": (
309
+ color: $error-200,
310
+ bg: transparent,
311
+ border-color: transparent,
312
+ hover-color: $error-300,
313
+ hover-bg: transparent,
314
+ hover-border-color: transparent,
315
+ active-color: $error-400,
316
+ active-bg: transparent,
317
+ active-border-color: transparent,
318
+ disabled-color: rgba($error-200, 0.4),
319
+ disabled-bg: transparent,
320
+ disabled-border-color: transparent
262
321
  )
263
322
  );
264
323
 
@@ -278,25 +337,27 @@ $button-outline-variants: (
278
337
  --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
279
338
  --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
280
339
  --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
281
- }
340
+ };
282
341
  }
283
342
 
284
- // Generate outline button variant classes
285
- @each $name, $props in $button-outline-variants {
286
- .btn-outline-#{$name} {
287
- --#{$prefix}btn-color: #{map-get($props, color)};
288
- --#{$prefix}btn-border-color: #{map-get($props, border-color)};
289
- --#{$prefix}btn-hover-color: #{map-get($props, hover-color)};
290
- --#{$prefix}btn-hover-bg: #{map-get($props, hover-bg)};
291
- --#{$prefix}btn-hover-border-color: #{map-get($props, hover-border-color)};
292
- --#{$prefix}btn-focus-shadow-rgb: #{map-get($props, focus-shadow-rgb)};
293
- --#{$prefix}btn-active-color: #{map-get($props, active-color)};
294
- --#{$prefix}btn-active-bg: #{map-get($props, active-bg)};
295
- --#{$prefix}btn-active-border-color: #{map-get($props, active-border-color)};
296
- --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
297
- --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
298
- --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
299
- }
343
+ .on-primary {
344
+ @each $name, $props in $on-primary-button-variants {
345
+ .btn-#{$name} {
346
+ --#{$prefix}btn-color: #{map-get($props, color)};
347
+ --#{$prefix}btn-bg: #{map-get($props, bg)};
348
+ --#{$prefix}btn-border-color: #{map-get($props, border-color)};
349
+ --#{$prefix}btn-hover-color: #{map-get($props, hover-color)};
350
+ --#{$prefix}btn-hover-bg: #{map-get($props, hover-bg)};
351
+ --#{$prefix}btn-hover-border-color: #{map-get($props, hover-border-color)};
352
+ --#{$prefix}btn-focus-shadow-rgb: #{map-get($props, focus-shadow-rgb)};
353
+ --#{$prefix}btn-active-color: #{map-get($props, active-color)};
354
+ --#{$prefix}btn-active-bg: #{map-get($props, active-bg)};
355
+ --#{$prefix}btn-active-border-color: #{map-get($props, active-border-color)};
356
+ --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
357
+ --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
358
+ --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
359
+ }
360
+ };
300
361
  }
301
362
 
302
363
  // ============================================