Skip to content

Commit 5322f9c

Browse files
HerrTopiHerrTopi
committed
fix(ui-buttons): fix button border color
1 parent 52dbd71 commit 5322f9c

File tree

18 files changed

+36
-41
lines changed

18 files changed

+36
-41
lines changed

‎packages/shared-types/src/ComponentThemeVariables.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ export type BaseButtonTheme = {
188188
primaryGhostHoverBoxShadow: string
189189

190190
secondaryColor: Colors['contrasts']['grey125125']
191-
secondaryBorderColor: Colors['contrasts']['grey1214']
191+
secondaryBorderColor: Colors['contrasts']['grey1424']
192192
secondaryBackground: Colors['contrasts']['grey1111']
193193
secondaryHoverBackground: Colors['contrasts']['grey1214']
194194
secondaryActiveBackground: Colors['contrasts']['grey1214']
@@ -453,15 +453,15 @@ export type ColorIndicatorTheme = {
453453
backgroundPosition: string
454454
circleIndicatorSize: string
455455
rectangleIndicatorSize: string
456-
colorIndicatorBorderColor: string
456+
colorIndicatorBorderColor: Colors['contrasts']['grey1424']
457457
rectangularIndicatorBorderRadius: Spacing['xxSmall']
458458
rectangularIndicatorBorderWidth: Border['widthSmall']
459459
}
460460

461461
export type ColorMixerPaletteTheme = {
462462
indicatorBorderColor: Colors['contrasts']['grey125125']
463463
whiteColor: Colors['contrasts']['white1010']
464-
colorIndicatorBorderColor: string
464+
colorIndicatorBorderColor: Colors['contrasts']['grey1424']
465465

466466
indicatorBorderWidth: Border['widthSmall']
467467
paletteBorderRadius: Border['radiusMedium']
@@ -484,7 +484,7 @@ export type ColorMixerSliderTheme = {
484484
checkerboardBackgroundImage: string
485485
checkerboardBackgroundSize: string
486486
checkerboardBackgroundPosition: string
487-
colorIndicatorBorderColor: string
487+
colorIndicatorBorderColor: Colors['contrasts']['grey1424']
488488

489489
indicatorBorderWidth: Border['widthSmall']
490490
sliderBorderWidth: Border['widthSmall']
@@ -503,7 +503,7 @@ export type ColorPickerTheme = {
503503
checkerboardBackgroundImage: string
504504
checkerboardBackgroundSize: string
505505
checkerboardBackgroundPosition: string
506-
colorIndicatorBorderColor: string
506+
colorIndicatorBorderColor: Colors['contrasts']['grey1424']
507507
simpleColorContainerLeftPadding: Spacing['xSmall']
508508
hashMarkContainerLineHeight: Typography['fontSizeXLarge']
509509
hashMarkContainerLeftPadding: Spacing['xSmall']
@@ -545,7 +545,7 @@ export type DrawerLayoutContentTheme = {
545545

546546
export type DrawerLayoutTrayTheme = {
547547
background: Colors['contrasts']['white1010']
548-
borderColor: Colors['contrasts']['grey1214']
548+
borderColor: Colors['contrasts']['grey1424']
549549
borderWidth: Border['widthSmall']
550550
borderStyle: Border['style']
551551
zIndex: Stacking['topmost']
@@ -568,7 +568,7 @@ export type FileDropTheme = {
568568
borderRadius: Border['radiusLarge']
569569
borderWidth: Border['widthMedium']
570570
borderStyle: string
571-
borderColor: Colors['contrasts']['grey1214']
571+
borderColor: Colors['contrasts']['grey1424']
572572
hoverBorderColor: Colors['contrasts']['blue4570']
573573
acceptedColor: Colors['contrasts']['blue4570']
574574
rejectedColor: Colors['contrasts']['red4570']
@@ -657,7 +657,7 @@ export type HeadingTheme = Typography & {
657657
secondaryColor: Colors['contrasts']['grey4570']
658658
secondaryInverseColor: Colors['contrasts']['grey1111']
659659
borderPadding: Spacing['xxxSmall']
660-
borderColor: Colors['contrasts']['grey1214']
660+
borderColor: Colors['contrasts']['grey1424']
661661
borderWidth: Border['widthSmall']
662662
borderStyle: Border['style']
663663
}
@@ -800,7 +800,7 @@ export type ModalBodyTheme = {
800800

801801
export type ModalFooterTheme = {
802802
background: Colors['contrasts']['grey1111']
803-
borderColor: Colors['contrasts']['grey1214']
803+
borderColor: Colors['contrasts']['grey1424']
804804
borderWidth: Border['widthSmall']
805805
borderRadius: Border['radiusMedium']
806806
padding: Spacing['small']
@@ -810,7 +810,7 @@ export type ModalFooterTheme = {
810810

811811
export type ModalHeaderTheme = {
812812
background: Colors['contrasts']['white1010']
813-
borderColor: Colors['contrasts']['grey1214']
813+
borderColor: Colors['contrasts']['grey1424']
814814
padding: Spacing['medium']
815815
paddingCompact: Spacing['small']
816816
inverseBackground: Colors['contrasts']['grey125125']
@@ -852,7 +852,7 @@ export type AppNavItemTheme = {
852852
export type AppNavTheme = {
853853
fontFamily: Typography['fontFamily']
854854
height: string | 0
855-
borderColor: Colors['contrasts']['grey1214']
855+
borderColor: Colors['contrasts']['grey1424']
856856
borderStyle: Border['style']
857857
borderWidth: Border['widthSmall']
858858
horizontalMargin: Spacing['xxSmall']
@@ -899,7 +899,7 @@ export type NumberInputTheme = {
899899
fontWeight: Typography['fontWeightNormal']
900900
borderWidth: Border['widthSmall']
901901
borderStyle: Border['style']
902-
borderColor: Colors['contrasts']['grey1214']
902+
borderColor: Colors['contrasts']['grey3045']
903903
borderRadius: Border['radiusMedium']
904904
color: Colors['contrasts']['grey125125']
905905
background: Colors['contrasts']['white1010']
@@ -908,7 +908,7 @@ export type NumberInputTheme = {
908908
arrowsColor: Colors['contrasts']['grey125125']
909909
arrowsBackgroundColor: Colors['contrasts']['grey1111']
910910
arrowsHoverBackgroundColor: Colors['contrasts']['grey1214']
911-
arrowsBorderColor: Colors['contrasts']['grey1214']
911+
arrowsBorderColor: Colors['contrasts']['grey3045']
912912
arrowsActiveBoxShadow: string
913913
focusOutlineWidth: Border['widthMedium']
914914
focusOutlineStyle: Border['style']
@@ -1252,7 +1252,7 @@ export type TableCellTheme = {
12521252
fontWeight: Typography['fontWeightNormal']
12531253
color: Colors['contrasts']['grey125125']
12541254
background: Colors['contrasts']['white1010']
1255-
borderColor: Colors['contrasts']['grey1214']
1255+
borderColor: Colors['contrasts']['grey3045']
12561256
lineHeight: Typography['lineHeightCondensed']
12571257
padding: string | 0
12581258
}
@@ -1317,7 +1317,7 @@ export type TabsPanelTheme = {
13171317
lineHeight: Typography['lineHeight']
13181318
color: Colors['contrasts']['grey125125']
13191319
background: Colors['contrasts']['white1010']
1320-
borderColor: Colors['contrasts']['grey1214']
1320+
borderColor: Colors['contrasts']['grey1424']
13211321
borderWidth: Border['widthSmall']
13221322
borderStyle: Border['style']
13231323
defaultOverflowY: string
@@ -1364,7 +1364,7 @@ export type TagTheme = {
13641364
transitionTiming: string
13651365
defaultBackgroundHover: Colors['contrasts']['grey1214']
13661366
defaultBackground: Colors['contrasts']['grey1111']
1367-
defaultBorderColor: Colors['contrasts']['grey1214']
1367+
defaultBorderColor: Colors['contrasts']['grey1424']
13681368
defaultBorderRadius: string
13691369
defaultBorderStyle: string
13701370
defaultBorderWidth: string | 0
@@ -1469,7 +1469,7 @@ export type ToggleDetailsTheme = {
14691469
filledBackgroundColor: Colors['contrasts']['grey1111']
14701470
filledBorderWidth: Border['widthSmall']
14711471
filledBorderStyle: Border['style']
1472-
filledBorderColor: Colors['contrasts']['grey1214']
1472+
filledBorderColor: Colors['contrasts']['grey1424']
14731473
filledBorderRadius: Border['radiusMedium']
14741474
filledPadding: Spacing['small']
14751475
}
@@ -1577,7 +1577,7 @@ export type TopNavBarMenuItemsTheme = {
15771577

15781578
export type TrayTheme = {
15791579
background: Colors['contrasts']['white1010']
1580-
borderColor: Colors['contrasts']['grey1214']
1580+
borderColor: Colors['contrasts']['grey1424']
15811581
borderWidth: Border['widthSmall']
15821582
borderStyle: Border['style']
15831583
boxShadow: Shadows['depth3']
@@ -1644,7 +1644,7 @@ export type ContextViewTheme = {
16441644
arrowSize: string | 0
16451645
arrowBorderWidth: Border['widthSmall']
16461646
arrowBackgroundColor: Colors['contrasts']['white1010']
1647-
arrowBorderColor: Colors['contrasts']['grey1214']
1647+
arrowBorderColor: Colors['contrasts']['grey1424']
16481648
arrowBackgroundColorInverse: Colors['contrasts']['grey125125']
16491649
arrowBorderColorInverse: string
16501650
}

‎packages/ui-buttons/src/BaseButton/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
119119
primaryGhostHoverBoxShadow: 'none',
120120

121121
secondaryColor: colors?.contrasts?.grey125125,
122-
secondaryBorderColor: colors?.contrasts?.grey1214,
122+
secondaryBorderColor: colors?.contrasts?.grey1424,
123123
secondaryBackground: colors?.contrasts?.grey1111,
124124
secondaryHoverBackground: colors?.contrasts?.grey1214,
125125
secondaryActiveBackground: colors?.contrasts?.grey1214,

‎packages/ui-color-picker/src/ColorIndicator/theme.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@
2525
import type { Theme } from '@instructure/ui-themes'
2626
import { ColorIndicatorTheme } from '@instructure/shared-types'
2727

28-
export const colorIndicatorBorderColor = '#384A5899'
29-
3028
/**
3129
* Generates the theme object for the component from the theme and provided additional information
3230
* @param {Object} theme The actual theme object.
@@ -45,7 +43,7 @@ const generateComponentTheme = (theme: Theme): ColorIndicatorTheme => {
4543
backgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
4644
circleIndicatorSize: '1.5rem',
4745
rectangleIndicatorSize: '2.375rem',
48-
colorIndicatorBorderColor,
46+
colorIndicatorBorderColor: colors?.contrasts?.grey1424,
4947
rectangularIndicatorBorderRadius: spacing?.xxSmall,
5048
rectangularIndicatorBorderWidth: borders?.widthSmall
5149
}

‎packages/ui-color-picker/src/ColorMixer/ColorPalette/theme.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424

2525
import type { Theme } from '@instructure/ui-themes'
2626
import type { ColorMixerPaletteTheme } from '@instructure/shared-types'
27-
import { colorIndicatorBorderColor } from '../../ColorIndicator/theme'
2827

2928
/**
3029
* Generates the theme object for the component from the theme and provided additional information
@@ -37,7 +36,7 @@ const generateComponentTheme = (theme: Theme): ColorMixerPaletteTheme => {
3736
const componentVariables = {
3837
indicatorBorderColor: colors?.contrasts?.grey125125,
3938
whiteColor: colors?.contrasts?.white1010,
40-
colorIndicatorBorderColor,
39+
colorIndicatorBorderColor: colors?.contrasts?.grey1424,
4140
indicatorBorderWidth: borders.widthSmall,
4241
paletteBorderRadius: borders.radiusMedium,
4342
paletteBorderWidth: borders.widthSmall,

‎packages/ui-color-picker/src/ColorMixer/Slider/theme.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424

2525
import type { Theme } from '@instructure/ui-themes'
2626
import type { ColorMixerSliderTheme } from '@instructure/shared-types'
27-
import { colorIndicatorBorderColor } from '../../ColorIndicator/theme'
2827

2928
/**
3029
* Generates the theme object for the component from the theme and provided additional information
@@ -44,7 +43,7 @@ const generateComponentTheme = (theme: Theme): ColorMixerSliderTheme => {
4443
checkerboardBackgroundSize: '.5rem .5rem',
4544
checkerboardBackgroundPosition:
4645
'0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
47-
colorIndicatorBorderColor,
46+
colorIndicatorBorderColor: colors?.contrasts?.grey1424,
4847
indicatorBorderWidth: borders.widthSmall,
4948
sliderBorderWidth: borders.widthSmall,
5049
indicatorZIndex: stacking.above,

‎packages/ui-color-picker/src/ColorPicker/theme.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424

2525
import type { Theme } from '@instructure/ui-themes'
2626
import type { ColorPickerTheme } from '@instructure/shared-types'
27-
import { colorIndicatorBorderColor } from '../ColorIndicator/theme'
2827

2928
/**
3029
* Generates the theme object for the component from the theme and provided additional information
@@ -55,7 +54,7 @@ const generateComponentTheme = (theme: Theme): ColorPickerTheme => {
5554
checkerboardBackgroundSize: '.5rem .5rem',
5655
checkerboardBackgroundPosition:
5756
'0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
58-
colorIndicatorBorderColor,
57+
colorIndicatorBorderColor: colors?.contrasts?.grey1424,
5958
simpleColorContainerLeftPadding: spacing?.xSmall,
6059
hashMarkContainerLineHeight: typography?.fontSizeXLarge,
6160
hashMarkContainerLeftPadding: spacing?.xSmall,

‎packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const generateComponentTheme = (theme: Theme): DrawerLayoutTrayTheme => {
3535

3636
const componentVariables: DrawerLayoutTrayTheme = {
3737
background: colors?.contrasts?.white1010,
38-
borderColor: colors?.contrasts?.grey1214,
38+
borderColor: colors?.contrasts?.grey1424,
3939
borderWidth: borders?.widthSmall,
4040
borderStyle: borders?.style,
4141
zIndex: stacking?.topmost,

‎packages/ui-file-drop/src/FileDrop/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const generateComponentTheme = (theme: Theme): FileDropTheme => {
4545
borderRadius: borders?.radiusLarge,
4646
borderWidth: borders?.widthMedium,
4747
borderStyle: 'dashed',
48-
borderColor: colors?.contrasts?.grey1214,
48+
borderColor: colors?.contrasts?.grey1424,
4949
hoverBorderColor: colors?.contrasts?.blue4570,
5050
acceptedColor: colors?.contrasts?.blue4570,
5151
rejectedColor: colors?.contrasts?.red4570

‎packages/ui-heading/src/Heading/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const generateComponentTheme = (theme: Theme): HeadingTheme => {
8181
secondaryInverseColor: colors?.contrasts?.grey1111,
8282

8383
borderPadding: spacing?.xxxSmall,
84-
borderColor: colors?.contrasts?.grey1214,
84+
borderColor: colors?.contrasts?.grey1424,
8585
borderWidth: borders?.widthSmall,
8686
borderStyle: borders?.style
8787
}

‎packages/ui-modal/src/Modal/ModalFooter/theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const generateComponentTheme = (theme: Theme): ModalFooterTheme => {
3535

3636
const componentVariables: ModalFooterTheme = {
3737
background: colors?.contrasts?.grey1111,
38-
borderColor: colors?.contrasts?.grey1214,
38+
borderColor: colors?.contrasts?.grey1424,
3939
borderWidth: borders?.widthSmall,
4040
borderRadius: borders?.radiusMedium,
4141
padding: spacing?.small,

0 commit comments

Comments
 (0)