@functionalcms/svelte-components 2.34.13 → 2.34.15

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 (5) hide show
  1. package/dist/components/Link.svelte +48 -48
  2. package/dist/components/agnostic/Button/button-base.css +1 -1
  3. package/dist/components/agnostic/Button/button-core.css +42 -42
  4. package/dist/components/agnostic/Button/button-empty.css +6 -6
  5. package/package.json +1 -1
package/dist/components/Link.svelte CHANGED
@@ -9,35 +9,35 @@
9
9
  cursor: pointer;
10
10
  box-sizing: border-box;
11
11
  transition-property: all;
12
- transition-duration: var(--agnostic-timing-medium);
12
+ transition-duration: var(--functional-timing-medium);
13
13
  }
14
14
 
15
15
  .btn-skin,
16
16
  .btn {
17
- color: var(--agnostic-btn-font-color, var(--agnostic-dark));
18
- background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
19
- border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
17
+ color: var(--functional-btn-font-color, var(--functional-dark));
18
+ background-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
19
+ border-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
20
20
 
21
21
  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
22
22
  border-style: solid;
23
- border-width: var(--agnostic-btn-border-size, 1px);
24
- font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
25
- font-weight: var(--agnostic-btn-font-weight, 400);
26
- font-size: var(--agnostic-btn-font-size, 1rem);
23
+ border-width: var(--functional-btn-border-size, 1px);
24
+ font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
25
+ font-weight: var(--functional-btn-font-weight, 400);
26
+ font-size: var(--functional-btn-font-size, 1rem);
27
27
 
28
28
  /* this can be overriden, but it might mess with the balance of the button heights across variants */
29
- line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
30
- padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
31
- padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
32
- padding-inline-start: var(--agnostic-side-padding, 0.75rem);
33
- padding-inline-end: var(--agnostic-side-padding, 0.75rem);
29
+ line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
30
+ padding-block-start: var(--functional-vertical-pad, 0.5rem);
31
+ padding-block-end: var(--functional-vertical-pad, 0.5rem);
32
+ padding-inline-start: var(--functional-side-padding, 0.75rem);
33
+ padding-inline-end: var(--functional-side-padding, 0.75rem);
34
34
  text-decoration: none;
35
35
  text-align: center;
36
36
  outline: none;
37
37
  }
38
38
 
39
39
  .btn:visited {
40
- color: var(--agnostic-btn-font-color, var(--agnostic-dark));
40
+ color: var(--functional-btn-font-color, var(--functional-dark));
41
41
  }
42
42
 
43
43
  .btn:hover {
@@ -53,13 +53,13 @@
53
53
  }
54
54
 
55
55
  .btn:focus {
56
- box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
56
+ box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
57
57
 
58
58
  /* Needed for High Contrast mode */
59
59
  outline:
60
- var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
61
- var(--agnostic-focus-ring-outline-color);
62
- transition: box-shadow var(--agnostic-timing-fast) ease-out;
60
+ var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
61
+ var(--functional-focus-ring-outline-color);
62
+ transition: box-shadow var(--functional-timing-fast) ease-out;
63
63
 
64
64
  /* In order for the focused element's box-shadow to appear above its siblings we need to
65
65
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
@@ -78,13 +78,13 @@
78
78
  .btn.disabled,
79
79
  .btn:disabled {
80
80
  top: 0 !important;
81
- background: var(--agnostic-btn-disabled-bg, var(--agnostic-gray-mid-dark)) !important;
81
+ background: var(--functional-btn-disabled-bg, var(--functional-gray-mid-dark)) !important;
82
82
  text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;
83
83
 
84
84
  /* primary, secondary, natural, all look same when disabled; and we don't want to
85
85
  have an inadvertant looking blue primary border when disabled so it's transparent */
86
86
  border-color: transparent;
87
- color: var(--agnostic-btn-disabled-color, var(--agnostic-gray-dark)) !important;
87
+ color: var(--functional-btn-disabled-color, var(--functional-gray-dark)) !important;
88
88
  cursor: default !important;
89
89
  appearance: none !important;
90
90
  box-shadow: none !important;
@@ -92,47 +92,47 @@
92
92
  }
93
93
 
94
94
  .btn-primary {
95
- background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
96
- border-color: var(--agnostic-btn-primary, var(--agnostic-primary));
97
- color: var(--agnostic-btn-primary-color, var(--agnostic-light));
95
+ background-color: var(--functional-btn-primary, var(--functional-primary));
96
+ border-color: var(--functional-btn-primary, var(--functional-primary));
97
+ color: var(--functional-btn-primary-color, var(--functional-light));
98
98
  }
99
99
 
100
100
  /* Border and font is primary. When hovered, we invert with primary background and white font */
101
101
 
102
102
  .btn-primary.btn-bordered {
103
- color: var(--agnostic-btn-primary, var(--agnostic-primary));
103
+ color: var(--functional-btn-primary, var(--functional-primary));
104
104
  }
105
105
 
106
106
  .btn-primary.btn-bordered:hover,
107
107
  .btn-primary.btn-bordered:focus {
108
- background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
109
- color: var(--agnostic-btn-primary-color, var(--agnostic-light));
108
+ background-color: var(--functional-btn-primary, var(--functional-primary));
109
+ color: var(--functional-btn-primary-color, var(--functional-light));
110
110
  }
111
111
 
112
112
  .btn-primary:visited {
113
- color: var(--agnostic-btn-primary-color, var(--agnostic-light));
113
+ color: var(--functional-btn-primary-color, var(--functional-light));
114
114
  }
115
115
 
116
116
  .btn-secondary {
117
- background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
118
- border-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
119
- color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
117
+ background-color: var(--functional-btn-secondary, var(--functional-secondary));
118
+ border-color: var(--functional-btn-secondary, var(--functional-secondary));
119
+ color: var(--functional-btn-secondary-color, var(--functional-light));
120
120
  }
121
121
 
122
122
  /* Border and font is secondary. When hovered, we invert with secondary background and white font */
123
123
 
124
124
  .btn-secondary.btn-bordered {
125
- color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
125
+ color: var(--functional-btn-secondary, var(--functional-secondary));
126
126
  }
127
127
 
128
128
  .btn-secondary.btn-bordered:hover,
129
129
  .btn-secondary.btn-bordered:focus {
130
- background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
131
- color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
130
+ background-color: var(--functional-btn-secondary, var(--functional-secondary));
131
+ color: var(--functional-btn-secondary-color, var(--functional-light));
132
132
  }
133
133
 
134
134
  .btn-secondary:visited {
135
- color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
135
+ color: var(--functional-btn-secondary-color, var(--functional-light));
136
136
  }
137
137
 
138
138
  /*
@@ -150,14 +150,14 @@
150
150
  */
151
151
 
152
152
  .btn-large {
153
- font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
153
+ font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
154
154
  height: 3rem;
155
155
  line-height: 3rem;
156
156
  padding: 0 3rem;
157
157
  }
158
158
 
159
159
  .btn-small {
160
- font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
160
+ font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
161
161
  height: 2rem;
162
162
  line-height: 2rem;
163
163
  padding: 0 2rem;
@@ -168,7 +168,7 @@
168
168
  */
169
169
 
170
170
  .btn-rounded {
171
- border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
171
+ border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
172
172
  }
173
173
 
174
174
  .btn-pill {
@@ -189,13 +189,13 @@
189
189
  }
190
190
 
191
191
  .btn-circle-large {
192
- font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
192
+ font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
193
193
  width: 3rem;
194
194
  height: 3rem;
195
195
  }
196
196
 
197
197
  .btn-circle-small {
198
- font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
198
+ font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
199
199
  width: 2rem;
200
200
  height: 2rem;
201
201
  }
@@ -216,7 +216,7 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
216
216
  }
217
217
 
218
218
  .btn-grouped {
219
- border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
219
+ border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
220
220
  }
221
221
 
222
222
  .btn-grouped:not(:last-child) {
@@ -231,9 +231,9 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
231
231
  }
232
232
 
233
233
  .btn-capsule {
234
- --padding-side: calc(var(--agnostic-side-padding, 0.75rem) * 1.5);
234
+ --padding-side: calc(var(--functional-side-padding, 0.75rem) * 1.5);
235
235
 
236
- border-radius: var(--agnostic-radius-capsule);
236
+ border-radius: var(--functional-radius-capsule);
237
237
  padding-inline-start: var(--padding-side);
238
238
  padding-inline-end: var(--padding-side);
239
239
  }
@@ -251,8 +251,8 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
251
251
  */
252
252
 
253
253
  :is(.btn-link, .btn-blank) {
254
- font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
255
- font-size: var(--agnostic-btn-font-size, 1rem);
254
+ font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
255
+ font-size: var(--functional-btn-font-size, 1rem);
256
256
  background-color: transparent;
257
257
  border: 0;
258
258
  border-radius: 0;
@@ -264,16 +264,16 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
264
264
  on the side padding. As such, these have a good bit less then regular buttons. */
265
265
 
266
266
  .btn-blank {
267
- --agnostic-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
267
+ --functional-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
268
268
 
269
- padding-inline-start: var(--agnostic-btn-blank-side-padding);
270
- padding-inline-end: var(--agnostic-btn-blank-side-padding);
269
+ padding-inline-start: var(--functional-btn-blank-side-padding);
270
+ padding-inline-end: var(--functional-btn-blank-side-padding);
271
271
  }
272
272
 
273
273
  /* A button blank with link color text */
274
274
 
275
275
  .btn-link {
276
- color: var(--agnostic-btn-primary, var(--agnostic-primary));
276
+ color: var(--functional-btn-primary, var(--functional-primary));
277
277
  }
278
278
 
279
279
  .btn-link:hover {
package/dist/components/agnostic/Button/button-base.css CHANGED
@@ -8,5 +8,5 @@
8
8
  cursor: pointer;
9
9
  box-sizing: border-box;
10
10
  transition-property: all;
11
- transition-duration: var(--agnostic-timing-medium);
11
+ transition-duration: var(--functional-timing-medium);
12
12
  }
package/dist/components/agnostic/Button/button-core.css CHANGED
@@ -9,35 +9,35 @@
9
9
  cursor: pointer;
10
10
  box-sizing: border-box;
11
11
  transition-property: all;
12
- transition-duration: var(--agnostic-timing-medium);
12
+ transition-duration: var(--functional-timing-medium);
13
13
  }
14
14
 
15
15
  .btn-skin,
16
16
  .btn {
17
- color: var(--agnostic-btn-font-color, var(--agnostic-dark));
18
- background-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
19
- border-color: var(--agnostic-btn-bgcolor, var(--agnostic-gray-light));
17
+ color: var(--functional-btn-font-color, var(--functional-dark));
18
+ background-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
19
+ border-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
20
20
 
21
21
  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
22
22
  border-style: solid;
23
- border-width: var(--agnostic-btn-border-size, 1px);
24
- font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
25
- font-weight: var(--agnostic-btn-font-weight, 400);
26
- font-size: var(--agnostic-btn-font-size, 1rem);
23
+ border-width: var(--functional-btn-border-size, 1px);
24
+ font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
25
+ font-weight: var(--functional-btn-font-weight, 400);
26
+ font-size: var(--functional-btn-font-size, 1rem);
27
27
 
28
28
  /* this can be overriden, but it might mess with the balance of the button heights across variants */
29
- line-height: var(--agnostic-line-height, var(--fluid-20, 1.25rem));
30
- padding-block-start: var(--agnostic-vertical-pad, 0.5rem);
31
- padding-block-end: var(--agnostic-vertical-pad, 0.5rem);
32
- padding-inline-start: var(--agnostic-side-padding, 0.75rem);
33
- padding-inline-end: var(--agnostic-side-padding, 0.75rem);
29
+ line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
30
+ padding-block-start: var(--functional-vertical-pad, 0.5rem);
31
+ padding-block-end: var(--functional-vertical-pad, 0.5rem);
32
+ padding-inline-start: var(--functional-side-padding, 0.75rem);
33
+ padding-inline-end: var(--functional-side-padding, 0.75rem);
34
34
  text-decoration: none;
35
35
  text-align: center;
36
36
  outline: none;
37
37
  }
38
38
 
39
39
  .btn:visited {
40
- color: var(--agnostic-btn-font-color, var(--agnostic-dark));
40
+ color: var(--functional-btn-font-color, var(--functional-dark));
41
41
  }
42
42
 
43
43
  .btn:hover {
@@ -53,13 +53,13 @@
53
53
  }
54
54
 
55
55
  .btn:focus {
56
- box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
56
+ box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
57
57
 
58
58
  /* Needed for High Contrast mode */
59
59
  outline:
60
- var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
61
- var(--agnostic-focus-ring-outline-color);
62
- transition: box-shadow var(--agnostic-timing-fast) ease-out;
60
+ var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
61
+ var(--functional-focus-ring-outline-color);
62
+ transition: box-shadow var(--functional-timing-fast) ease-out;
63
63
 
64
64
  /* In order for the focused element's box-shadow to appear above its siblings we need to
65
65
  establish a new stacking context: https://stackoverflow.com/a/28042700 */
@@ -77,13 +77,13 @@
77
77
  .btn.disabled,
78
78
  .btn:disabled {
79
79
  top: 0 !important;
80
- background: var(--agnostic-btn-disabled-bg, var(--agnostic-gray-mid-dark)) !important;
80
+ background: var(--functional-btn-disabled-bg, var(--functional-gray-mid-dark)) !important;
81
81
  text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;
82
82
 
83
83
  /* primary, secondary, natural, all look same when disabled; and we don't want to
84
84
  have an inadvertant looking blue primary border when disabled so it's transparent */
85
85
  border-color: transparent;
86
- color: var(--agnostic-btn-disabled-color, var(--agnostic-gray-dark)) !important;
86
+ color: var(--functional-btn-disabled-color, var(--functional-gray-dark)) !important;
87
87
  cursor: default !important;
88
88
  appearance: none !important;
89
89
  box-shadow: none !important;
@@ -91,45 +91,45 @@
91
91
  }
92
92
 
93
93
  .btn-primary {
94
- background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
95
- border-color: var(--agnostic-btn-primary, var(--agnostic-primary));
96
- color: var(--agnostic-btn-primary-color, var(--agnostic-light));
94
+ background-color: var(--functional-btn-primary, var(--functional-primary));
95
+ border-color: var(--functional-btn-primary, var(--functional-primary));
96
+ color: var(--functional-btn-primary-color, var(--functional-light));
97
97
  }
98
98
 
99
99
  /* Border and font is primary. When hovered, we invert with primary background and white font */
100
100
  .btn-primary.btn-bordered {
101
- color: var(--agnostic-btn-primary, var(--agnostic-primary));
101
+ color: var(--functional-btn-primary, var(--functional-primary));
102
102
  }
103
103
 
104
104
  .btn-primary.btn-bordered:hover,
105
105
  .btn-primary.btn-bordered:focus {
106
- background-color: var(--agnostic-btn-primary, var(--agnostic-primary));
107
- color: var(--agnostic-btn-primary-color, var(--agnostic-light));
106
+ background-color: var(--functional-btn-primary, var(--functional-primary));
107
+ color: var(--functional-btn-primary-color, var(--functional-light));
108
108
  }
109
109
 
110
110
  .btn-primary:visited {
111
- color: var(--agnostic-btn-primary-color, var(--agnostic-light));
111
+ color: var(--functional-btn-primary-color, var(--functional-light));
112
112
  }
113
113
 
114
114
  .btn-secondary {
115
- background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
116
- border-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
117
- color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
115
+ background-color: var(--functional-btn-secondary, var(--functional-secondary));
116
+ border-color: var(--functional-btn-secondary, var(--functional-secondary));
117
+ color: var(--functional-btn-secondary-color, var(--functional-light));
118
118
  }
119
119
 
120
120
  /* Border and font is secondary. When hovered, we invert with secondary background and white font */
121
121
  .btn-secondary.btn-bordered {
122
- color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
122
+ color: var(--functional-btn-secondary, var(--functional-secondary));
123
123
  }
124
124
 
125
125
  .btn-secondary.btn-bordered:hover,
126
126
  .btn-secondary.btn-bordered:focus {
127
- background-color: var(--agnostic-btn-secondary, var(--agnostic-secondary));
128
- color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
127
+ background-color: var(--functional-btn-secondary, var(--functional-secondary));
128
+ color: var(--functional-btn-secondary-color, var(--functional-light));
129
129
  }
130
130
 
131
131
  .btn-secondary:visited {
132
- color: var(--agnostic-btn-secondary-color, var(--agnostic-light));
132
+ color: var(--functional-btn-secondary-color, var(--functional-light));
133
133
  }
134
134
 
135
135
  /*
@@ -145,14 +145,14 @@
145
145
  * Sizes
146
146
  */
147
147
  .btn-large {
148
- font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
148
+ font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
149
149
  height: 3rem;
150
150
  line-height: 3rem;
151
151
  padding: 0 3rem;
152
152
  }
153
153
 
154
154
  .btn-small {
155
- font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
155
+ font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
156
156
  height: 2rem;
157
157
  line-height: 2rem;
158
158
  padding: 0 2rem;
@@ -162,7 +162,7 @@
162
162
  * Rounded
163
163
  */
164
164
  .btn-rounded {
165
- border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
165
+ border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
166
166
  }
167
167
 
168
168
  .btn-pill {
@@ -182,13 +182,13 @@
182
182
  }
183
183
 
184
184
  .btn-circle-large {
185
- font-size: calc(var(--agnostic-btn-font-size, 1rem) + 0.25rem);
185
+ font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
186
186
  width: 3rem;
187
187
  height: 3rem;
188
188
  }
189
189
 
190
190
  .btn-circle-small {
191
- font-size: calc(var(--agnostic-btn-font-size, 1rem) - 0.25rem);
191
+ font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
192
192
  width: 2rem;
193
193
  height: 2rem;
194
194
  }
@@ -207,7 +207,7 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
207
207
  }
208
208
 
209
209
  .btn-grouped {
210
- border-radius: var(--agnostic-btn-radius, var(--agnostic-radius, 0.25rem));
210
+ border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
211
211
  }
212
212
 
213
213
  .btn-grouped:not(:last-child) {
@@ -222,9 +222,9 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
222
222
  }
223
223
 
224
224
  .btn-capsule {
225
- --padding-side: calc(var(--agnostic-side-padding, 0.75rem) * 1.5);
225
+ --padding-side: calc(var(--functional-side-padding, 0.75rem) * 1.5);
226
226
 
227
- border-radius: var(--agnostic-radius-capsule);
227
+ border-radius: var(--functional-radius-capsule);
228
228
  padding-inline-start: var(--padding-side);
229
229
  padding-inline-end: var(--padding-side);
230
230
  }
package/dist/components/agnostic/Button/button-empty.css CHANGED
@@ -3,8 +3,8 @@
3
3
  * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
4
4
  */
5
5
  :is(.btn-link, .btn-blank) {
6
- font-family: var(--agnostic-btn-font-family, var(--agnostic-font-family-body));
7
- font-size: var(--agnostic-btn-font-size, 1rem);
6
+ font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
7
+ font-size: var(--functional-btn-font-size, 1rem);
8
8
  background-color: transparent;
9
9
  border: 0;
10
10
  border-radius: 0;
@@ -15,15 +15,15 @@
15
15
  /* Since blank buttons can be used for things like input addons we don't want to go crazy
16
16
  on the side padding. As such, these have a good bit less then regular buttons. */
17
17
  .btn-blank {
18
- --agnostic-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
18
+ --functional-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
19
19
 
20
- padding-inline-start: var(--agnostic-btn-blank-side-padding);
21
- padding-inline-end: var(--agnostic-btn-blank-side-padding);
20
+ padding-inline-start: var(--functional-btn-blank-side-padding);
21
+ padding-inline-end: var(--functional-btn-blank-side-padding);
22
22
  }
23
23
 
24
24
  /* A button blank with link color text */
25
25
  .btn-link {
26
- color: var(--agnostic-btn-primary, var(--agnostic-primary));
26
+ color: var(--functional-btn-primary, var(--functional-primary));
27
27
  }
28
28
 
29
29
  .btn-link:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@functionalcms/svelte-components",
3
- "version": "2.34.13",
3
+ "version": "2.34.15",
4
4
  "watch": {
5
5
  "build": {
6
6
  "patterns": [