sdga-ui 1.0.2 → 1.0.3

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 (61) hide show
  1. package/.editorconfig +23 -23
  2. package/.github/workflows/publish.yml +38 -33
  3. package/.prettierignore +73 -73
  4. package/.prettierrc +17 -17
  5. package/LICENSE +21 -21
  6. package/README.md +167 -167
  7. package/fonts/IBM_Plex_Sans_Arabic/OFL.txt +93 -93
  8. package/package.json +51 -47
  9. package/theme/_fonts.scss +58 -58
  10. package/theme/_functions.scss +11 -11
  11. package/theme/_variables.scss +50 -50
  12. package/theme/components/_accordion.scss +35 -35
  13. package/theme/components/_alerts.scss +11 -11
  14. package/theme/components/_badges.scss +8 -8
  15. package/theme/components/_breadcrumb.scss +13 -13
  16. package/theme/components/_buttons.scss +270 -270
  17. package/theme/components/_cards.scss +21 -21
  18. package/theme/components/_carousel.scss +33 -33
  19. package/theme/components/_content.scss +211 -211
  20. package/theme/components/_dropdowns.scss +45 -45
  21. package/theme/components/_forms-check.scss +124 -124
  22. package/theme/components/_forms-floating.scss +17 -17
  23. package/theme/components/_forms-inputs.scss +70 -70
  24. package/theme/components/_forms-range.scss +26 -26
  25. package/theme/components/_forms-select.scss +47 -47
  26. package/theme/components/_forms-switch.scss +63 -63
  27. package/theme/components/_forms-validation.scss +16 -16
  28. package/theme/components/_forms.scss +14 -14
  29. package/theme/components/_list-group.scss +26 -26
  30. package/theme/components/_modals.scss +42 -42
  31. package/theme/components/_navbar.scss +40 -40
  32. package/theme/components/_navigation.scss +151 -151
  33. package/theme/components/_offcanvas.scss +15 -15
  34. package/theme/components/_overlays.scss +112 -112
  35. package/theme/components/_pagination.scss +39 -39
  36. package/theme/components/_popovers.scss +26 -26
  37. package/theme/components/_progress.scss +11 -11
  38. package/theme/components/_spinners.scss +11 -11
  39. package/theme/components/_tables.scss +47 -47
  40. package/theme/components/_toasts.scss +16 -16
  41. package/theme/components/_tooltips.scss +15 -15
  42. package/theme/config/_base.scss +111 -111
  43. package/theme/config/_colors.scss +303 -303
  44. package/theme/config/_effects.scss +227 -227
  45. package/theme/config/_radius.scss +78 -78
  46. package/theme/config/_spacing.scss +155 -155
  47. package/theme/config/_typography.scss +118 -118
  48. package/theme/customizations/_alerts.scss +242 -242
  49. package/theme/customizations/_badges.scss +15 -15
  50. package/theme/customizations/_buttons.scss +209 -209
  51. package/theme/customizations/_cards.scss +117 -117
  52. package/theme/customizations/_forms-check.scss +278 -278
  53. package/theme/customizations/_forms-inputs.scss +9 -9
  54. package/theme/customizations/_forms-switch.scss +91 -91
  55. package/theme/customizations/_forms.scss +5 -5
  56. package/theme/customizations/_global.scss +25 -25
  57. package/theme/customizations/_links.scss +46 -46
  58. package/theme/customizations/_tables.scss +67 -67
  59. package/theme/customizations/_toasts.scss +221 -221
  60. package/theme/customizations/_utilities.scss +138 -138
  61. package/theme/dga-ui.scss +28 -28
package/theme/components/_breadcrumb.scss CHANGED
@@ -1,13 +1,13 @@
1
- // Bootstrap 5.3 - Breadcrumb Component Variables
2
-
3
- $breadcrumb-font-size: $font-size-base;
4
- $breadcrumb-padding-y: 0.75rem;
5
- $breadcrumb-padding-x: 1rem;
6
- $breadcrumb-item-padding-x: 0.5rem;
7
- $breadcrumb-margin-bottom: 1rem;
8
- $breadcrumb-bg: $gray-100;
9
- $breadcrumb-divider-color: $gray-500;
10
- $breadcrumb-active-color: $gray-700;
11
- $breadcrumb-divider: "/";
12
- $breadcrumb-divider-flipped: $breadcrumb-divider;
13
- $breadcrumb-border-radius: $radius-sm;
1
+ // Bootstrap 5.3 - Breadcrumb Component Variables
2
+
3
+ $breadcrumb-font-size: $font-size-base;
4
+ $breadcrumb-padding-y: 0.75rem;
5
+ $breadcrumb-padding-x: 1rem;
6
+ $breadcrumb-item-padding-x: 0.5rem;
7
+ $breadcrumb-margin-bottom: 1rem;
8
+ $breadcrumb-bg: $gray-100;
9
+ $breadcrumb-divider-color: $gray-500;
10
+ $breadcrumb-active-color: $gray-700;
11
+ $breadcrumb-divider: "/";
12
+ $breadcrumb-divider-flipped: $breadcrumb-divider;
13
+ $breadcrumb-border-radius: $radius-sm;
package/theme/components/_buttons.scss CHANGED
@@ -1,270 +1,270 @@
1
- // Bootstrap 5.3 - Button Variables
2
-
3
- // ============================================
4
- // BUTTONS
5
- // ============================================
6
-
7
- // Button padding and sizing
8
- $btn-padding-y: 0.375rem;
9
- $btn-padding-x: 0.75rem;
10
- $btn-font-family: $font-family-base;
11
- $btn-font-size: $font-size-base;
12
- $btn-line-height: $line-height-base;
13
- $btn-white-space: null;
14
-
15
- $btn-padding-y-sm: 0.25rem;
16
- $btn-padding-x-sm: 0.5rem;
17
- $btn-font-size-sm: $font-size-sm;
18
- $btn-line-height-sm: $line-height-sm;
19
-
20
- $btn-padding-y-lg: 0.5rem;
21
- $btn-padding-x-lg: 1rem;
22
- $btn-font-size-lg: $font-size-lg;
23
- $btn-line-height-lg: $line-height-lg;
24
-
25
- // Button styling
26
- $btn-border-width: $border-width;
27
- $btn-font-weight: 500;
28
- $btn-box-shadow: none;
29
- $btn-focus-width: 0.25rem;
30
- $btn-focus-box-shadow: none;
31
- $btn-disabled-opacity: 0.65;
32
- $btn-active-box-shadow: none;
33
-
34
- // Button border radius
35
- $btn-border-radius: $radius-sm;
36
- $btn-border-radius-sm: $radius-sm;
37
- $btn-border-radius-lg: $radius-sm;
38
-
39
- // Button transitions
40
- $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
41
-
42
- // Button hover state
43
- $btn-hover-bg-shade-amount: 15%;
44
- $btn-hover-bg-tint-amount: 15%;
45
- $btn-hover-border-shade-amount: 20%;
46
- $btn-hover-border-tint-amount: 10%;
47
-
48
- // Button active state
49
- $btn-active-bg-shade-amount: 20%;
50
- $btn-active-bg-tint-amount: 20%;
51
- $btn-active-border-shade-amount: 25%;
52
- $btn-active-border-tint-amount: 10%;
53
-
54
- // Link buttons
55
- $btn-link-color: $link-color;
56
- $btn-link-hover-color: $link-hover-color;
57
- $btn-link-decoration: $link-decoration;
58
- $btn-link-hover-decoration: $link-hover-decoration;
59
- $btn-link-focus-shadow-rgb: rgba($primary, 0.5);
60
- $btn-link-disabled-color: $gray-600;
61
-
62
- // Button close
63
- $btn-close-width: .7031rem;
64
- $btn-close-height: $btn-close-width;
65
- $btn-close-padding-x: .6481rem;
66
- $btn-close-padding-y: $btn-close-padding-x;
67
- $btn-close-color: $black;
68
- $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
69
- $btn-close-focus-shadow: $btn-focus-box-shadow;
70
- $btn-close-opacity: 1;
71
- $btn-close-hover-opacity: 0.75;
72
- $btn-close-focus-opacity: 1;
73
- $btn-close-disabled-opacity: 0.25;
74
- $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
75
-
76
- // ============================================
77
- // CUSTOM BUTTON VARIANTS
78
- // ============================================
79
-
80
- // Primary Button Variant
81
- $btn-primary-color: $white;
82
- $btn-primary-bg: $primary-600;
83
- $btn-primary-border-color: $primary-600;
84
- $btn-primary-hover-color: $white;
85
- $btn-primary-hover-bg: $primary-700;
86
- $btn-primary-hover-border-color: $primary-700;
87
- $btn-primary-active-color: $white;
88
- $btn-primary-active-bg: $primary-800;
89
- $btn-primary-active-border-color: $primary-800;
90
- $btn-primary-focus-color: $white;
91
- $btn-primary-focus-bg: $primary-600;
92
- $btn-primary-focus-border-color: $black;
93
- $btn-primary-focus-shadow-rgb: null;
94
- $btn-primary-disabled-color: $white;
95
- $btn-primary-disabled-bg: $primary-200;
96
- $btn-primary-disabled-border-color: $primary-200;
97
-
98
- // Primary Outline Button Variant
99
- $btn-outline-primary-color: $primary-600;
100
- $btn-outline-primary-border-color: $primary-600;
101
- $btn-outline-primary-hover-color: $white;
102
- $btn-outline-primary-hover-bg: $primary-600;
103
- $btn-outline-primary-hover-border-color: $primary-600;
104
- $btn-outline-primary-active-color: $white;
105
- $btn-outline-primary-active-bg: $primary-700;
106
- $btn-outline-primary-active-border-color: $primary-700;
107
- $btn-outline-primary-focus-color: $primary-700;
108
- $btn-outline-primary-focus-bg: transparent;
109
- $btn-outline-primary-focus-border-color: $black;
110
- $btn-outline-primary-focus-shadow-rgb: null;
111
- $btn-outline-primary-disabled-color: $primary-400;
112
- $btn-outline-primary-disabled-bg: transparent;
113
- $btn-outline-primary-disabled-border-color: $primary-400;
114
-
115
- // Secondary Button Variant
116
- $btn-secondary-color: $black;
117
- $btn-secondary-bg: $secondary-100;
118
- $btn-secondary-border-color: $secondary-100;
119
- $btn-secondary-hover-color: $black;
120
- $btn-secondary-hover-bg: $secondary-200;
121
- $btn-secondary-hover-border-color: $secondary-200;
122
- $btn-secondary-active-color: $black;
123
- $btn-secondary-active-bg: $secondary-200;
124
- $btn-secondary-active-border-color: $secondary-200;
125
- $btn-secondary-focus-color: $black;
126
- $btn-secondary-focus-bg: $secondary-100;
127
- $btn-secondary-focus-border-color: $black;
128
- $btn-secondary-focus-shadow-rgb: null;
129
- $btn-secondary-disabled-color: $secondary-400;
130
- $btn-secondary-disabled-bg: $secondary-200;
131
- $btn-secondary-disabled-border-color: $secondary-200;
132
-
133
- // Secondary Outline Button Variant
134
- $btn-outline-secondary-color: $black;
135
- $btn-outline-secondary-border-color: $secondary-300;
136
- $btn-outline-secondary-hover-color: $black;
137
- $btn-outline-secondary-hover-bg: $secondary-100;
138
- $btn-outline-secondary-hover-border-color: $secondary-200;
139
- $btn-outline-secondary-active-color: $black;
140
- $btn-outline-secondary-active-bg: $secondary-200;
141
- $btn-outline-secondary-active-border-color: $secondary-300;
142
- $btn-outline-secondary-focus-color: $black;
143
- $btn-outline-secondary-focus-bg: transparent;
144
- $btn-outline-secondary-focus-border-color: $black;
145
- $btn-outline-secondary-focus-shadow-rgb: null;
146
- $btn-outline-secondary-disabled-color: $secondary-400;
147
- $btn-outline-secondary-disabled-bg: transparent;
148
- $btn-outline-secondary-disabled-border-color: $secondary-400;
149
-
150
- // Danger/Destructive Button Variant
151
- $btn-danger-color: $white;
152
- $btn-danger-bg: $danger-600;
153
- $btn-danger-border-color: $danger-600;
154
- $btn-danger-hover-color: $white;
155
- $btn-danger-hover-bg: $danger-700;
156
- $btn-danger-hover-border-color: $danger-700;
157
- $btn-danger-active-color: $white;
158
- $btn-danger-active-bg: $danger-800;
159
- $btn-danger-active-border-color: $danger-800;
160
- $btn-danger-focus-color: $white;
161
- $btn-danger-focus-bg: $danger-600;
162
- $btn-danger-focus-border-color: $black;
163
- $btn-danger-focus-shadow-rgb: null;
164
- $btn-danger-disabled-color: $white;
165
- $btn-danger-disabled-bg: $danger-200;
166
- $btn-danger-disabled-border-color: $danger-200;
167
-
168
- // Danger Outline Button Variant
169
- $btn-outline-danger-color: $danger-600;
170
- $btn-outline-danger-border-color: $danger-600;
171
- $btn-outline-danger-hover-color: $white;
172
- $btn-outline-danger-hover-bg: $danger-600;
173
- $btn-outline-danger-hover-border-color: $danger-600;
174
- $btn-outline-danger-active-color: $white;
175
- $btn-outline-danger-active-bg: $danger-700;
176
- $btn-outline-danger-active-border-color: $danger-700;
177
- $btn-outline-danger-focus-color: $danger-700;
178
- $btn-outline-danger-focus-bg: transparent;
179
- $btn-outline-danger-focus-border-color: $black;
180
- $btn-outline-danger-focus-shadow-rgb: null;
181
- $btn-outline-danger-disabled-color: $danger-400;
182
- $btn-outline-danger-disabled-bg: transparent;
183
- $btn-outline-danger-disabled-border-color: $danger-400;
184
-
185
- // Neutral Button Variant
186
- $btn-neutral-color: $white;
187
- $btn-neutral-bg: $neutral-950;
188
- $btn-neutral-border-color: $neutral-950;
189
- $btn-neutral-hover-color: $white;
190
- $btn-neutral-hover-bg: $neutral-800;
191
- $btn-neutral-hover-border-color: $neutral-800;
192
- $btn-neutral-active-color: $white;
193
- $btn-neutral-active-bg: $neutral-600;
194
- $btn-neutral-active-border-color: $neutral-600;
195
- $btn-neutral-focus-color: $white;
196
- $btn-neutral-focus-bg: $neutral-950;
197
- $btn-neutral-focus-border-color: $black;
198
- $btn-neutral-focus-shadow-rgb: 77, 87, 97;
199
- $btn-neutral-disabled-color: $neutral-400;
200
- $btn-neutral-disabled-bg: $neutral-200;
201
- $btn-neutral-disabled-border-color: $neutral-200;
202
-
203
- // Neutral Outline Button Variant
204
- $btn-outline-neutral-color: $neutral-600;
205
- $btn-outline-neutral-border-color: $neutral-600;
206
- $btn-outline-neutral-hover-color: $white;
207
- $btn-outline-neutral-hover-bg: $neutral-600;
208
- $btn-outline-neutral-hover-border-color: $neutral-600;
209
- $btn-outline-neutral-active-color: $white;
210
- $btn-outline-neutral-active-bg: $neutral-700;
211
- $btn-outline-neutral-active-border-color: $neutral-700;
212
- $btn-outline-neutral-focus-color: $neutral-700;
213
- $btn-outline-neutral-focus-bg: transparent;
214
- $btn-outline-neutral-focus-border-color: $neutral-600;
215
- $btn-outline-neutral-focus-shadow-rgb: null;
216
- $btn-outline-neutral-disabled-color: $neutral-400;
217
- $btn-outline-neutral-disabled-bg: transparent;
218
- $btn-outline-neutral-disabled-border-color: $neutral-400;
219
-
220
- // Subtle Outline Button Variant
221
- $btn-subtle-color: $black;
222
- $btn-subtle-border-color: transparent;
223
- $btn-subtle-hover-color: $black;
224
- $btn-subtle-hover-bg: transparent;
225
- $btn-subtle-hover-border-color: transparent;
226
- $btn-subtle-active-color: $black;
227
- $btn-subtle-active-bg: transparent;
228
- $btn-subtle-active-border-color: transparent;
229
- $btn-subtle-focus-color: $black;
230
- $btn-subtle-focus-bg: transparent;
231
- $btn-subtle-focus-border-color: transparent;
232
- $btn-subtle-focus-shadow-rgb: null;
233
- $btn-subtle-disabled-color: $neutral-400;
234
- $btn-subtle-disabled-bg: transparent;
235
- $btn-subtle-disabled-border-color: transparent;
236
-
237
- // Lavender Button Variant
238
- $btn-lavender-color: $white;
239
- $btn-lavender-bg: $lavender-600;
240
- $btn-lavender-border-color: $lavender-600;
241
- $btn-lavender-hover-color: $white;
242
- $btn-lavender-hover-bg: $lavender-700;
243
- $btn-lavender-hover-border-color: $lavender-700;
244
- $btn-lavender-active-color: $white;
245
- $btn-lavender-active-bg: $lavender-800;
246
- $btn-lavender-active-border-color: $lavender-800;
247
- $btn-lavender-focus-color: $white;
248
- $btn-lavender-focus-bg: $lavender-600;
249
- $btn-lavender-focus-border-color: $lavender-700;
250
- $btn-lavender-focus-shadow-rgb: null;
251
- $btn-lavender-disabled-color: $white;
252
- $btn-lavender-disabled-bg: $lavender-400;
253
- $btn-lavender-disabled-border-color: $lavender-400;
254
-
255
- // Lavender Outline Button Variant
256
- $btn-outline-lavender-color: $lavender-600;
257
- $btn-outline-lavender-border-color: $lavender-600;
258
- $btn-outline-lavender-hover-color: $white;
259
- $btn-outline-lavender-hover-bg: $lavender-600;
260
- $btn-outline-lavender-hover-border-color: $lavender-600;
261
- $btn-outline-lavender-active-color: $white;
262
- $btn-outline-lavender-active-bg: $lavender-700;
263
- $btn-outline-lavender-active-border-color: $lavender-700;
264
- $btn-outline-lavender-focus-color: $lavender-700;
265
- $btn-outline-lavender-focus-bg: transparent;
266
- $btn-outline-lavender-focus-border-color: $lavender-600;
267
- $btn-outline-lavender-focus-shadow-rgb: null;
268
- $btn-outline-lavender-disabled-color: $lavender-400;
269
- $btn-outline-lavender-disabled-bg: transparent;
270
- $btn-outline-lavender-disabled-border-color: $lavender-400;
1
+ // Bootstrap 5.3 - Button Variables
2
+
3
+ // ============================================
4
+ // BUTTONS
5
+ // ============================================
6
+
7
+ // Button padding and sizing
8
+ $btn-padding-y: 0.375rem;
9
+ $btn-padding-x: 0.75rem;
10
+ $btn-font-family: $font-family-base;
11
+ $btn-font-size: $font-size-base;
12
+ $btn-line-height: $line-height-base;
13
+ $btn-white-space: null;
14
+
15
+ $btn-padding-y-sm: 0.25rem;
16
+ $btn-padding-x-sm: 0.5rem;
17
+ $btn-font-size-sm: $font-size-sm;
18
+ $btn-line-height-sm: $line-height-sm;
19
+
20
+ $btn-padding-y-lg: 0.5rem;
21
+ $btn-padding-x-lg: 1rem;
22
+ $btn-font-size-lg: $font-size-lg;
23
+ $btn-line-height-lg: $line-height-lg;
24
+
25
+ // Button styling
26
+ $btn-border-width: $border-width;
27
+ $btn-font-weight: 500;
28
+ $btn-box-shadow: none;
29
+ $btn-focus-width: 0.25rem;
30
+ $btn-focus-box-shadow: none;
31
+ $btn-disabled-opacity: 0.65;
32
+ $btn-active-box-shadow: none;
33
+
34
+ // Button border radius
35
+ $btn-border-radius: $radius-sm;
36
+ $btn-border-radius-sm: $radius-sm;
37
+ $btn-border-radius-lg: $radius-sm;
38
+
39
+ // Button transitions
40
+ $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
41
+
42
+ // Button hover state
43
+ $btn-hover-bg-shade-amount: 15%;
44
+ $btn-hover-bg-tint-amount: 15%;
45
+ $btn-hover-border-shade-amount: 20%;
46
+ $btn-hover-border-tint-amount: 10%;
47
+
48
+ // Button active state
49
+ $btn-active-bg-shade-amount: 20%;
50
+ $btn-active-bg-tint-amount: 20%;
51
+ $btn-active-border-shade-amount: 25%;
52
+ $btn-active-border-tint-amount: 10%;
53
+
54
+ // Link buttons
55
+ $btn-link-color: $link-color;
56
+ $btn-link-hover-color: $link-hover-color;
57
+ $btn-link-decoration: $link-decoration;
58
+ $btn-link-hover-decoration: $link-hover-decoration;
59
+ $btn-link-focus-shadow-rgb: rgba($primary, 0.5);
60
+ $btn-link-disabled-color: $gray-600;
61
+
62
+ // Button close
63
+ $btn-close-width: .7031rem;
64
+ $btn-close-height: $btn-close-width;
65
+ $btn-close-padding-x: .6481rem;
66
+ $btn-close-padding-y: $btn-close-padding-x;
67
+ $btn-close-color: $black;
68
+ $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
69
+ $btn-close-focus-shadow: $btn-focus-box-shadow;
70
+ $btn-close-opacity: 1;
71
+ $btn-close-hover-opacity: 0.75;
72
+ $btn-close-focus-opacity: 1;
73
+ $btn-close-disabled-opacity: 0.25;
74
+ $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
75
+
76
+ // ============================================
77
+ // CUSTOM BUTTON VARIANTS
78
+ // ============================================
79
+
80
+ // Primary Button Variant
81
+ $btn-primary-color: $white;
82
+ $btn-primary-bg: $primary-600;
83
+ $btn-primary-border-color: $primary-600;
84
+ $btn-primary-hover-color: $white;
85
+ $btn-primary-hover-bg: $primary-700;
86
+ $btn-primary-hover-border-color: $primary-700;
87
+ $btn-primary-active-color: $white;
88
+ $btn-primary-active-bg: $primary-800;
89
+ $btn-primary-active-border-color: $primary-800;
90
+ $btn-primary-focus-color: $white;
91
+ $btn-primary-focus-bg: $primary-600;
92
+ $btn-primary-focus-border-color: $black;
93
+ $btn-primary-focus-shadow-rgb: null;
94
+ $btn-primary-disabled-color: $white;
95
+ $btn-primary-disabled-bg: $primary-200;
96
+ $btn-primary-disabled-border-color: $primary-200;
97
+
98
+ // Primary Outline Button Variant
99
+ $btn-outline-primary-color: $primary-600;
100
+ $btn-outline-primary-border-color: $primary-600;
101
+ $btn-outline-primary-hover-color: $white;
102
+ $btn-outline-primary-hover-bg: $primary-600;
103
+ $btn-outline-primary-hover-border-color: $primary-600;
104
+ $btn-outline-primary-active-color: $white;
105
+ $btn-outline-primary-active-bg: $primary-700;
106
+ $btn-outline-primary-active-border-color: $primary-700;
107
+ $btn-outline-primary-focus-color: $primary-700;
108
+ $btn-outline-primary-focus-bg: transparent;
109
+ $btn-outline-primary-focus-border-color: $black;
110
+ $btn-outline-primary-focus-shadow-rgb: null;
111
+ $btn-outline-primary-disabled-color: $primary-400;
112
+ $btn-outline-primary-disabled-bg: transparent;
113
+ $btn-outline-primary-disabled-border-color: $primary-400;
114
+
115
+ // Secondary Button Variant
116
+ $btn-secondary-color: $black;
117
+ $btn-secondary-bg: $secondary-100;
118
+ $btn-secondary-border-color: $secondary-100;
119
+ $btn-secondary-hover-color: $black;
120
+ $btn-secondary-hover-bg: $secondary-200;
121
+ $btn-secondary-hover-border-color: $secondary-200;
122
+ $btn-secondary-active-color: $black;
123
+ $btn-secondary-active-bg: $secondary-200;
124
+ $btn-secondary-active-border-color: $secondary-200;
125
+ $btn-secondary-focus-color: $black;
126
+ $btn-secondary-focus-bg: $secondary-100;
127
+ $btn-secondary-focus-border-color: $black;
128
+ $btn-secondary-focus-shadow-rgb: null;
129
+ $btn-secondary-disabled-color: $secondary-400;
130
+ $btn-secondary-disabled-bg: $secondary-200;
131
+ $btn-secondary-disabled-border-color: $secondary-200;
132
+
133
+ // Secondary Outline Button Variant
134
+ $btn-outline-secondary-color: $black;
135
+ $btn-outline-secondary-border-color: $secondary-300;
136
+ $btn-outline-secondary-hover-color: $black;
137
+ $btn-outline-secondary-hover-bg: $secondary-100;
138
+ $btn-outline-secondary-hover-border-color: $secondary-200;
139
+ $btn-outline-secondary-active-color: $black;
140
+ $btn-outline-secondary-active-bg: $secondary-200;
141
+ $btn-outline-secondary-active-border-color: $secondary-300;
142
+ $btn-outline-secondary-focus-color: $black;
143
+ $btn-outline-secondary-focus-bg: transparent;
144
+ $btn-outline-secondary-focus-border-color: $black;
145
+ $btn-outline-secondary-focus-shadow-rgb: null;
146
+ $btn-outline-secondary-disabled-color: $secondary-400;
147
+ $btn-outline-secondary-disabled-bg: transparent;
148
+ $btn-outline-secondary-disabled-border-color: $secondary-400;
149
+
150
+ // Danger/Destructive Button Variant
151
+ $btn-danger-color: $white;
152
+ $btn-danger-bg: $danger-600;
153
+ $btn-danger-border-color: $danger-600;
154
+ $btn-danger-hover-color: $white;
155
+ $btn-danger-hover-bg: $danger-700;
156
+ $btn-danger-hover-border-color: $danger-700;
157
+ $btn-danger-active-color: $white;
158
+ $btn-danger-active-bg: $danger-800;
159
+ $btn-danger-active-border-color: $danger-800;
160
+ $btn-danger-focus-color: $white;
161
+ $btn-danger-focus-bg: $danger-600;
162
+ $btn-danger-focus-border-color: $black;
163
+ $btn-danger-focus-shadow-rgb: null;
164
+ $btn-danger-disabled-color: $white;
165
+ $btn-danger-disabled-bg: $danger-200;
166
+ $btn-danger-disabled-border-color: $danger-200;
167
+
168
+ // Danger Outline Button Variant
169
+ $btn-outline-danger-color: $danger-600;
170
+ $btn-outline-danger-border-color: $danger-600;
171
+ $btn-outline-danger-hover-color: $white;
172
+ $btn-outline-danger-hover-bg: $danger-600;
173
+ $btn-outline-danger-hover-border-color: $danger-600;
174
+ $btn-outline-danger-active-color: $white;
175
+ $btn-outline-danger-active-bg: $danger-700;
176
+ $btn-outline-danger-active-border-color: $danger-700;
177
+ $btn-outline-danger-focus-color: $danger-700;
178
+ $btn-outline-danger-focus-bg: transparent;
179
+ $btn-outline-danger-focus-border-color: $black;
180
+ $btn-outline-danger-focus-shadow-rgb: null;
181
+ $btn-outline-danger-disabled-color: $danger-400;
182
+ $btn-outline-danger-disabled-bg: transparent;
183
+ $btn-outline-danger-disabled-border-color: $danger-400;
184
+
185
+ // Neutral Button Variant
186
+ $btn-neutral-color: $white;
187
+ $btn-neutral-bg: $neutral-950;
188
+ $btn-neutral-border-color: $neutral-950;
189
+ $btn-neutral-hover-color: $white;
190
+ $btn-neutral-hover-bg: $neutral-800;
191
+ $btn-neutral-hover-border-color: $neutral-800;
192
+ $btn-neutral-active-color: $white;
193
+ $btn-neutral-active-bg: $neutral-600;
194
+ $btn-neutral-active-border-color: $neutral-600;
195
+ $btn-neutral-focus-color: $white;
196
+ $btn-neutral-focus-bg: $neutral-950;
197
+ $btn-neutral-focus-border-color: $black;
198
+ $btn-neutral-focus-shadow-rgb: 77, 87, 97;
199
+ $btn-neutral-disabled-color: $neutral-400;
200
+ $btn-neutral-disabled-bg: $neutral-200;
201
+ $btn-neutral-disabled-border-color: $neutral-200;
202
+
203
+ // Neutral Outline Button Variant
204
+ $btn-outline-neutral-color: $neutral-600;
205
+ $btn-outline-neutral-border-color: $neutral-600;
206
+ $btn-outline-neutral-hover-color: $white;
207
+ $btn-outline-neutral-hover-bg: $neutral-600;
208
+ $btn-outline-neutral-hover-border-color: $neutral-600;
209
+ $btn-outline-neutral-active-color: $white;
210
+ $btn-outline-neutral-active-bg: $neutral-700;
211
+ $btn-outline-neutral-active-border-color: $neutral-700;
212
+ $btn-outline-neutral-focus-color: $neutral-700;
213
+ $btn-outline-neutral-focus-bg: transparent;
214
+ $btn-outline-neutral-focus-border-color: $neutral-600;
215
+ $btn-outline-neutral-focus-shadow-rgb: null;
216
+ $btn-outline-neutral-disabled-color: $neutral-400;
217
+ $btn-outline-neutral-disabled-bg: transparent;
218
+ $btn-outline-neutral-disabled-border-color: $neutral-400;
219
+
220
+ // Subtle Outline Button Variant
221
+ $btn-subtle-color: $black;
222
+ $btn-subtle-border-color: transparent;
223
+ $btn-subtle-hover-color: $black;
224
+ $btn-subtle-hover-bg: transparent;
225
+ $btn-subtle-hover-border-color: transparent;
226
+ $btn-subtle-active-color: $black;
227
+ $btn-subtle-active-bg: transparent;
228
+ $btn-subtle-active-border-color: transparent;
229
+ $btn-subtle-focus-color: $black;
230
+ $btn-subtle-focus-bg: transparent;
231
+ $btn-subtle-focus-border-color: transparent;
232
+ $btn-subtle-focus-shadow-rgb: null;
233
+ $btn-subtle-disabled-color: $neutral-400;
234
+ $btn-subtle-disabled-bg: transparent;
235
+ $btn-subtle-disabled-border-color: transparent;
236
+
237
+ // Lavender Button Variant
238
+ $btn-lavender-color: $white;
239
+ $btn-lavender-bg: $lavender-600;
240
+ $btn-lavender-border-color: $lavender-600;
241
+ $btn-lavender-hover-color: $white;
242
+ $btn-lavender-hover-bg: $lavender-700;
243
+ $btn-lavender-hover-border-color: $lavender-700;
244
+ $btn-lavender-active-color: $white;
245
+ $btn-lavender-active-bg: $lavender-800;
246
+ $btn-lavender-active-border-color: $lavender-800;
247
+ $btn-lavender-focus-color: $white;
248
+ $btn-lavender-focus-bg: $lavender-600;
249
+ $btn-lavender-focus-border-color: $lavender-700;
250
+ $btn-lavender-focus-shadow-rgb: null;
251
+ $btn-lavender-disabled-color: $white;
252
+ $btn-lavender-disabled-bg: $lavender-400;
253
+ $btn-lavender-disabled-border-color: $lavender-400;
254
+
255
+ // Lavender Outline Button Variant
256
+ $btn-outline-lavender-color: $lavender-600;
257
+ $btn-outline-lavender-border-color: $lavender-600;
258
+ $btn-outline-lavender-hover-color: $white;
259
+ $btn-outline-lavender-hover-bg: $lavender-600;
260
+ $btn-outline-lavender-hover-border-color: $lavender-600;
261
+ $btn-outline-lavender-active-color: $white;
262
+ $btn-outline-lavender-active-bg: $lavender-700;
263
+ $btn-outline-lavender-active-border-color: $lavender-700;
264
+ $btn-outline-lavender-focus-color: $lavender-700;
265
+ $btn-outline-lavender-focus-bg: transparent;
266
+ $btn-outline-lavender-focus-border-color: $lavender-600;
267
+ $btn-outline-lavender-focus-shadow-rgb: null;
268
+ $btn-outline-lavender-disabled-color: $lavender-400;
269
+ $btn-outline-lavender-disabled-bg: transparent;
270
+ $btn-outline-lavender-disabled-border-color: $lavender-400;
package/theme/components/_cards.scss CHANGED
@@ -1,21 +1,21 @@
1
- // Bootstrap 5.3 - Card Component Variables
2
-
3
- $card-spacer-y: $spacer;
4
- $card-spacer-x: $spacer;
5
- $card-title-spacer-y: $spacer * .5;
6
- $card-title-color: null;
7
- $card-subtitle-color: $gray-800;
8
- $card-border-width: 0;
9
- $card-border-color: none;
10
- $card-border-radius: $radius-lg;
11
- $card-box-shadow: $box-shadow;
12
- $card-inner-border-radius: subtract($card-border-radius, $card-border-width);
13
- $card-cap-padding-y: $card-spacer-y * 1.5 0;
14
- $card-cap-padding-x: 0;
15
- $card-cap-bg: none;
16
- $card-cap-color: null;
17
- $card-height: null;
18
- $card-color: null;
19
- $card-bg: var(--#{$prefix}body-bg);
20
- $card-img-overlay-padding: $spacer;
21
- $card-group-margin: $grid-gutter-width * .5;
1
+ // Bootstrap 5.3 - Card Component Variables
2
+
3
+ $card-spacer-y: $spacer;
4
+ $card-spacer-x: $spacer;
5
+ $card-title-spacer-y: $spacer * .5;
6
+ $card-title-color: null;
7
+ $card-subtitle-color: $gray-800;
8
+ $card-border-width: 0;
9
+ $card-border-color: none;
10
+ $card-border-radius: $radius-lg;
11
+ $card-box-shadow: $box-shadow;
12
+ $card-inner-border-radius: subtract($card-border-radius, $card-border-width);
13
+ $card-cap-padding-y: $card-spacer-y * 1.5 0;
14
+ $card-cap-padding-x: 0;
15
+ $card-cap-bg: none;
16
+ $card-cap-color: null;
17
+ $card-height: null;
18
+ $card-color: null;
19
+ $card-bg: var(--#{$prefix}body-bg);
20
+ $card-img-overlay-padding: $spacer;
21
+ $card-group-margin: $grid-gutter-width * .5;