@instructure/ui-buttons 10.20.0 → 10.20.1

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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/es/BaseButton/styles.js +34 -34
  3. package/lib/BaseButton/styles.js +34 -34
  4. package/package.json +20 -20
  5. package/src/BaseButton/styles.ts +48 -67
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/BaseButton/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.20.1](https://github.com/instructure/instructure-ui/compare/v10.20.0...v10.20.1) (2025-06-17)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-buttons:** fix secondary ai-button in firefox ([d331acd](https://github.com/instructure/instructure-ui/commit/d331acd8772306fe66d9d3797c6c30fb40e9f76c))
12
+
13
+
14
+
15
+
16
+
6
17
  # [10.20.0](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.20.0) (2025-06-13)
7
18
 
8
19
 
package/es/BaseButton/styles.js CHANGED
@@ -118,50 +118,30 @@ const generateStyle = (componentTheme, props, state) => {
118
118
  default: {
119
119
  color: componentTheme.primaryColor,
120
120
  background: `
121
- linear-gradient(165deg, ${componentTheme.aiBackgroundTopGradientColor} -20.97%, ${componentTheme.aiBackgroundBottomGradientColor} 141.21%) padding-box,
122
- linear-gradient(125deg, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 141.21%) border-box`,
123
- border: 'solid transparent',
121
+ linear-gradient(to bottom, ${componentTheme.aiBackgroundTopGradientColor} 0%, ${componentTheme.aiBackgroundBottomGradientColor} 100%) padding-box,
122
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) border-box`,
123
+ borderStyle: 'solid',
124
+ borderColor: 'transparent',
124
125
  boxShadow: componentTheme.primaryBoxShadow
125
126
  },
126
- active: {
127
- background: `
128
- linear-gradient(165deg, ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
129
- linear-gradient(125deg, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
130
- border: 'solid transparent',
131
- boxShadow: componentTheme.aiActiveBoxShadow
132
- },
127
+ active: {},
133
128
  hover: {
134
129
  background: `
135
- linear-gradient(165deg, ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
136
- linear-gradient(125deg, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
137
- border: 'solid transparent',
130
+ linear-gradient(to bottom, ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 100%) padding-box,
131
+ linear-gradient(to bottom, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 100%) border-box`,
132
+ borderStyle: 'solid',
133
+ borderColor: 'transparent',
138
134
  boxShadow: componentTheme.primaryHoverBoxShadow
139
135
  }
140
136
  },
141
137
  'ai-secondary': {
142
138
  default: {
143
- background: `
144
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
145
- linear-gradient(white) padding-box,
146
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
147
- border: 'solid transparent',
148
- boxShadow: componentTheme.primaryBoxShadow,
149
- WebkitTextFillColor: 'transparent'
150
- },
151
- active: {
152
- background: `
153
- linear-gradient(165deg, ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
154
- linear-gradient(125deg, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
155
- border: 'solid transparent',
156
- boxShadow: componentTheme.aiActiveBoxShadow
139
+ boxShadow: componentTheme.primaryBoxShadow
157
140
  },
141
+ active: {},
158
142
  hover: {
159
143
  background: `
160
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
161
- linear-gradient(165deg, ${lighten(componentTheme.aiBackgroundTopGradientColor, 70)} -20.97%, ${lighten(componentTheme.aiBackgroundBottomGradientColor, 70)} 141.21%) padding-box,
162
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
163
- border: 'solid transparent',
164
- boxShadow: componentTheme.primaryHoverBoxShadow
144
+ linear-gradient(to bottom, ${lighten(componentTheme.aiBackgroundTopGradientColor, 70)} 0%, ${lighten(componentTheme.aiBackgroundBottomGradientColor, 70)} 100%)`
165
145
  }
166
146
  },
167
147
  primary: withBackground ? {
@@ -336,7 +316,16 @@ const generateStyle = (componentTheme, props, state) => {
336
316
  textDecoration: 'none'
337
317
  },
338
318
  '&:active > [class$=-baseButton__content]': colorVariants[color].active,
339
- '&:hover > [class$=-baseButton__content]': colorVariants[color].hover
319
+ '&:hover > [class$=-baseButton__content]': colorVariants[color].hover,
320
+ //TODO not the greatest solution. Must be stronger than the same &&& enforcement of <View>
321
+ ...(color === 'ai-secondary' ? {
322
+ '&&&&&&&&&&': {
323
+ background: `
324
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`,
325
+ padding: componentTheme.borderWidth,
326
+ borderRadius: `calc(${componentTheme.borderRadius} + ${componentTheme.borderWidth})`
327
+ }
328
+ } : {})
340
329
  } : {
341
330
  textDecoration: 'none',
342
331
  label: 'baseButton',
@@ -363,6 +352,11 @@ const generateStyle = (componentTheme, props, state) => {
363
352
  '&:hover': {
364
353
  transform: componentTheme.hoverTransform
365
354
  },
355
+ ...(color === 'ai-secondary' ? {
356
+ border: 'none',
357
+ background: 'white',
358
+ transition: 'none'
359
+ } : {}),
366
360
  ...sizeVariants[size].content,
367
361
  ...colorVariants[color].default,
368
362
  ...shapeVariants[shape],
@@ -387,7 +381,13 @@ const generateStyle = (componentTheme, props, state) => {
387
381
  ...(isCondensed && {
388
382
  paddingTop: 0,
389
383
  paddingBottom: 0
390
- })
384
+ }),
385
+ ...(color === 'ai-secondary' ? {
386
+ background: `
387
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`,
388
+ backgroundClip: 'text',
389
+ color: 'transparent'
390
+ } : {})
391
391
  },
392
392
  iconSVG: {
393
393
  label: 'baseButton__iconSVG',
package/lib/BaseButton/styles.js CHANGED
@@ -124,50 +124,30 @@ const generateStyle = (componentTheme, props, state) => {
124
124
  default: {
125
125
  color: componentTheme.primaryColor,
126
126
  background: `
127
- linear-gradient(165deg, ${componentTheme.aiBackgroundTopGradientColor} -20.97%, ${componentTheme.aiBackgroundBottomGradientColor} 141.21%) padding-box,
128
- linear-gradient(125deg, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 141.21%) border-box`,
129
- border: 'solid transparent',
127
+ linear-gradient(to bottom, ${componentTheme.aiBackgroundTopGradientColor} 0%, ${componentTheme.aiBackgroundBottomGradientColor} 100%) padding-box,
128
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) border-box`,
129
+ borderStyle: 'solid',
130
+ borderColor: 'transparent',
130
131
  boxShadow: componentTheme.primaryBoxShadow
131
132
  },
132
- active: {
133
- background: `
134
- linear-gradient(165deg, ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
135
- linear-gradient(125deg, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
136
- border: 'solid transparent',
137
- boxShadow: componentTheme.aiActiveBoxShadow
138
- },
133
+ active: {},
139
134
  hover: {
140
135
  background: `
141
- linear-gradient(165deg, ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
142
- linear-gradient(125deg, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
143
- border: 'solid transparent',
136
+ linear-gradient(to bottom, ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 100%) padding-box,
137
+ linear-gradient(to bottom, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 100%) border-box`,
138
+ borderStyle: 'solid',
139
+ borderColor: 'transparent',
144
140
  boxShadow: componentTheme.primaryHoverBoxShadow
145
141
  }
146
142
  },
147
143
  'ai-secondary': {
148
144
  default: {
149
- background: `
150
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
151
- linear-gradient(white) padding-box,
152
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
153
- border: 'solid transparent',
154
- boxShadow: componentTheme.primaryBoxShadow,
155
- WebkitTextFillColor: 'transparent'
156
- },
157
- active: {
158
- background: `
159
- linear-gradient(165deg, ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
160
- linear-gradient(125deg, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
161
- border: 'solid transparent',
162
- boxShadow: componentTheme.aiActiveBoxShadow
145
+ boxShadow: componentTheme.primaryBoxShadow
163
146
  },
147
+ active: {},
164
148
  hover: {
165
149
  background: `
166
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
167
- linear-gradient(165deg, ${(0, _lighten.lighten)(componentTheme.aiBackgroundTopGradientColor, 70)} -20.97%, ${(0, _lighten.lighten)(componentTheme.aiBackgroundBottomGradientColor, 70)} 141.21%) padding-box,
168
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
169
- border: 'solid transparent',
170
- boxShadow: componentTheme.primaryHoverBoxShadow
150
+ linear-gradient(to bottom, ${(0, _lighten.lighten)(componentTheme.aiBackgroundTopGradientColor, 70)} 0%, ${(0, _lighten.lighten)(componentTheme.aiBackgroundBottomGradientColor, 70)} 100%)`
171
151
  }
172
152
  },
173
153
  primary: withBackground ? {
@@ -342,7 +322,16 @@ const generateStyle = (componentTheme, props, state) => {
342
322
  textDecoration: 'none'
343
323
  },
344
324
  '&:active > [class$=-baseButton__content]': colorVariants[color].active,
345
- '&:hover > [class$=-baseButton__content]': colorVariants[color].hover
325
+ '&:hover > [class$=-baseButton__content]': colorVariants[color].hover,
326
+ //TODO not the greatest solution. Must be stronger than the same &&& enforcement of <View>
327
+ ...(color === 'ai-secondary' ? {
328
+ '&&&&&&&&&&': {
329
+ background: `
330
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`,
331
+ padding: componentTheme.borderWidth,
332
+ borderRadius: `calc(${componentTheme.borderRadius} + ${componentTheme.borderWidth})`
333
+ }
334
+ } : {})
346
335
  } : {
347
336
  textDecoration: 'none',
348
337
  label: 'baseButton',
@@ -369,6 +358,11 @@ const generateStyle = (componentTheme, props, state) => {
369
358
  '&:hover': {
370
359
  transform: componentTheme.hoverTransform
371
360
  },
361
+ ...(color === 'ai-secondary' ? {
362
+ border: 'none',
363
+ background: 'white',
364
+ transition: 'none'
365
+ } : {}),
372
366
  ...sizeVariants[size].content,
373
367
  ...colorVariants[color].default,
374
368
  ...shapeVariants[shape],
@@ -393,7 +387,13 @@ const generateStyle = (componentTheme, props, state) => {
393
387
  ...(isCondensed && {
394
388
  paddingTop: 0,
395
389
  paddingBottom: 0
396
- })
390
+ }),
391
+ ...(color === 'ai-secondary' ? {
392
+ background: `
393
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`,
394
+ backgroundClip: 'text',
395
+ color: 'transparent'
396
+ } : {})
397
397
  },
398
398
  iconSVG: {
399
399
  label: 'baseButton__iconSVG',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "10.20.0",
3
+ "version": "10.20.1",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,10 +23,10 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.20.0",
27
- "@instructure/ui-babel-preset": "10.20.0",
28
- "@instructure/ui-test-utils": "10.20.0",
29
- "@instructure/ui-themes": "10.20.0",
26
+ "@instructure/ui-axe-check": "10.20.1",
27
+ "@instructure/ui-babel-preset": "10.20.1",
28
+ "@instructure/ui-test-utils": "10.20.1",
29
+ "@instructure/ui-themes": "10.20.1",
30
30
  "@testing-library/jest-dom": "^6.6.3",
31
31
  "@testing-library/react": "^16.0.1",
32
32
  "@testing-library/user-event": "^14.6.1",
@@ -34,21 +34,21 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.27.6",
37
- "@instructure/console": "10.20.0",
38
- "@instructure/emotion": "10.20.0",
39
- "@instructure/shared-types": "10.20.0",
40
- "@instructure/ui-a11y-content": "10.20.0",
41
- "@instructure/ui-a11y-utils": "10.20.0",
42
- "@instructure/ui-color-utils": "10.20.0",
43
- "@instructure/ui-dom-utils": "10.20.0",
44
- "@instructure/ui-icons": "10.20.0",
45
- "@instructure/ui-position": "10.20.0",
46
- "@instructure/ui-prop-types": "10.20.0",
47
- "@instructure/ui-react-utils": "10.20.0",
48
- "@instructure/ui-testable": "10.20.0",
49
- "@instructure/ui-tooltip": "10.20.0",
50
- "@instructure/ui-utils": "10.20.0",
51
- "@instructure/ui-view": "10.20.0",
37
+ "@instructure/console": "10.20.1",
38
+ "@instructure/emotion": "10.20.1",
39
+ "@instructure/shared-types": "10.20.1",
40
+ "@instructure/ui-a11y-content": "10.20.1",
41
+ "@instructure/ui-a11y-utils": "10.20.1",
42
+ "@instructure/ui-color-utils": "10.20.1",
43
+ "@instructure/ui-dom-utils": "10.20.1",
44
+ "@instructure/ui-icons": "10.20.1",
45
+ "@instructure/ui-position": "10.20.1",
46
+ "@instructure/ui-prop-types": "10.20.1",
47
+ "@instructure/ui-react-utils": "10.20.1",
48
+ "@instructure/ui-testable": "10.20.1",
49
+ "@instructure/ui-tooltip": "10.20.1",
50
+ "@instructure/ui-utils": "10.20.1",
51
+ "@instructure/ui-view": "10.20.1",
52
52
  "keycode": "^2",
53
53
  "prop-types": "^15.8.1"
54
54
  },
package/src/BaseButton/styles.ts CHANGED
@@ -137,96 +137,48 @@ const generateStyle = (
137
137
  default: {
138
138
  color: componentTheme.primaryColor,
139
139
  background: `
140
- linear-gradient(165deg, ${componentTheme.aiBackgroundTopGradientColor} -20.97%, ${componentTheme.aiBackgroundBottomGradientColor} 141.21%) padding-box,
141
- linear-gradient(125deg, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 141.21%) border-box`,
142
- border: 'solid transparent',
140
+ linear-gradient(to bottom, ${componentTheme.aiBackgroundTopGradientColor} 0%, ${componentTheme.aiBackgroundBottomGradientColor} 100%) padding-box,
141
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) border-box`,
142
+ borderStyle: 'solid',
143
+ borderColor: 'transparent',
143
144
  boxShadow: componentTheme.primaryBoxShadow
144
145
  },
145
- active: {
146
- background: `
147
- linear-gradient(165deg, ${darken(
148
- componentTheme.aiBackgroundTopGradientColor,
149
- 10
150
- )} -20.97%, ${darken(
151
- componentTheme.aiBackgroundBottomGradientColor,
152
- 10
153
- )} 141.21%) padding-box,
154
- linear-gradient(125deg, ${darken(
155
- componentTheme.aiBorderTopGradientColor,
156
- 10
157
- )} 0%, ${darken(
158
- componentTheme.aiBorderBottomGradientColor,
159
- 10
160
- )} 141.21%) border-box`,
161
- border: 'solid transparent',
162
- boxShadow: componentTheme.aiActiveBoxShadow
163
- },
146
+ active: {},
164
147
  hover: {
165
148
  background: `
166
- linear-gradient(165deg, ${darken(
149
+ linear-gradient(to bottom, ${darken(
167
150
  componentTheme.aiBackgroundTopGradientColor,
168
151
  10
169
- )} -20.97%, ${darken(
152
+ )} 0%, ${darken(
170
153
  componentTheme.aiBackgroundBottomGradientColor,
171
154
  10
172
- )} 141.21%) padding-box,
173
- linear-gradient(125deg, ${darken(
155
+ )} 100%) padding-box,
156
+ linear-gradient(to bottom, ${darken(
174
157
  componentTheme.aiBorderTopGradientColor,
175
158
  10
176
159
  )} 0%, ${darken(
177
160
  componentTheme.aiBorderBottomGradientColor,
178
161
  10
179
- )} 141.21%) border-box`,
180
- border: 'solid transparent',
162
+ )} 100%) border-box`,
163
+ borderStyle: 'solid',
164
+ borderColor: 'transparent',
181
165
  boxShadow: componentTheme.primaryHoverBoxShadow
182
166
  }
183
167
  },
184
168
  'ai-secondary': {
185
169
  default: {
186
- background: `
187
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
188
- linear-gradient(white) padding-box,
189
- linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
190
- border: 'solid transparent',
191
- boxShadow: componentTheme.primaryBoxShadow,
192
- WebkitTextFillColor: 'transparent'
193
- },
194
- active: {
195
- background: `
196
- linear-gradient(165deg, ${darken(
197
- componentTheme.aiBackgroundTopGradientColor,
198
- 10
199
- )} -20.97%, ${darken(
200
- componentTheme.aiBackgroundBottomGradientColor,
201
- 10
202
- )} 141.21%) padding-box,
203
- linear-gradient(125deg, ${darken(
204
- componentTheme.aiBorderTopGradientColor,
205
- 10
206
- )} 0%, ${darken(
207
- componentTheme.aiBorderBottomGradientColor,
208
- 10
209
- )} 141.21%) border-box`,
210
- border: 'solid transparent',
211
- boxShadow: componentTheme.aiActiveBoxShadow
170
+ boxShadow: componentTheme.primaryBoxShadow
212
171
  },
172
+ active: {},
213
173
  hover: {
214
174
  background: `
215
- linear-gradient(to bottom, ${
216
- componentTheme.aiBorderTopGradientColor
217
- } 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
218
- linear-gradient(165deg, ${lighten(
175
+ linear-gradient(to bottom, ${lighten(
219
176
  componentTheme.aiBackgroundTopGradientColor,
220
177
  70
221
- )} -20.97%, ${lighten(
178
+ )} 0%, ${lighten(
222
179
  componentTheme.aiBackgroundBottomGradientColor,
223
180
  70
224
- )} 141.21%) padding-box,
225
- linear-gradient(to bottom, ${
226
- componentTheme.aiBorderTopGradientColor
227
- } -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
228
- border: 'solid transparent',
229
- boxShadow: componentTheme.primaryHoverBoxShadow
181
+ )} 100%)`
230
182
  }
231
183
  },
232
184
  primary: withBackground
@@ -420,7 +372,20 @@ const generateStyle = (
420
372
  },
421
373
  '&:active > [class$=-baseButton__content]':
422
374
  colorVariants[color!].active,
423
- '&:hover > [class$=-baseButton__content]': colorVariants[color!].hover
375
+ '&:hover > [class$=-baseButton__content]':
376
+ colorVariants[color!].hover,
377
+
378
+ //TODO not the greatest solution. Must be stronger than the same &&& enforcement of <View>
379
+ ...(color === 'ai-secondary'
380
+ ? {
381
+ '&&&&&&&&&&': {
382
+ background: `
383
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`,
384
+ padding: componentTheme.borderWidth,
385
+ borderRadius: `calc(${componentTheme.borderRadius} + ${componentTheme.borderWidth})`
386
+ }
387
+ }
388
+ : {})
424
389
  }
425
390
  : {
426
391
  textDecoration: 'none',
@@ -449,6 +414,14 @@ const generateStyle = (
449
414
 
450
415
  '&:hover': { transform: componentTheme.hoverTransform },
451
416
 
417
+ ...(color === 'ai-secondary'
418
+ ? {
419
+ border: 'none',
420
+ background: 'white',
421
+ transition: 'none'
422
+ }
423
+ : {}),
424
+
452
425
  ...sizeVariants[size!].content,
453
426
  ...colorVariants[color!].default,
454
427
  ...shapeVariants[shape!],
@@ -477,7 +450,15 @@ const generateStyle = (
477
450
  ...(isCondensed && {
478
451
  paddingTop: 0,
479
452
  paddingBottom: 0
480
- })
453
+ }),
454
+ ...(color === 'ai-secondary'
455
+ ? {
456
+ background: `
457
+ linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%)`,
458
+ backgroundClip: 'text',
459
+ color: 'transparent'
460
+ }
461
+ : {})
481
462
  },
482
463
 
483
464
  iconSVG: {