Skip to content

Commit 5e61c28

Browse files
LinKCodingLinKCoding
authored
feat(borderColors): adding semantic and colormode compatible colors for borderColor
Add semantic border colors to colormode
1 parent 675415a commit 5e61c28

File tree

13 files changed

+106
-22
lines changed

13 files changed

+106
-22
lines changed

‎packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap‎

Lines changed: 78 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@ exports[`themes admin - theme shape 1`] = `
8989
"background-hover": "rgba(255,255,255,0.09)",
9090
"background-primary": "#0A0D1C",
9191
"background-selected": "rgba(255,255,255,0.04)",
92+
"border-disabled": "rgba(255,255,255,0.5)",
93+
"border-primary": "#ffffff",
94+
"border-secondary": "rgba(255,255,255,0.65)",
95+
"border-tertiary": "rgba(255,255,255,0.2)",
9296
"danger": "#E85D7F",
9397
"danger-hover": "#DC5879",
9498
"feedback-error": "#E85D7F",
@@ -116,6 +120,10 @@ exports[`themes admin - theme shape 1`] = `
116120
"background-hover": "rgba(16,22,47,0.12)",
117121
"background-primary": "#FFF0E5",
118122
"background-selected": "rgba(16,22,47,0.04)",
123+
"border-disabled": "rgba(16,22,47,0.63)",
124+
"border-primary": "#10162F",
125+
"border-secondary": "rgba(16,22,47,0.75)",
126+
"border-tertiary": "rgba(16,22,47,0.28)",
119127
"danger": "#E91C11",
120128
"danger-hover": "#BE1809",
121129
"feedback-error": "#BE1809",
@@ -146,6 +154,10 @@ exports[`themes admin - theme shape 1`] = `
146154
"--color-background-hover": "var(--color-navy-200)",
147155
"--color-background-primary": "var(--color-beige)",
148156
"--color-background-selected": "var(--color-navy-100)",
157+
"--color-border-disabled": "var(--color-navy-500)",
158+
"--color-border-primary": "var(--color-navy-800)",
159+
"--color-border-secondary": "var(--color-navy-600)",
160+
"--color-border-tertiary": "var(--color-navy-300)",
149161
"--color-danger": "var(--color-red-500)",
150162
"--color-danger-hover": "var(--color-red-600)",
151163
"--color-feedback-error": "var(--color-red-600)",
@@ -261,8 +273,8 @@ exports[`themes admin - theme shape 1`] = `
261273
"xl": "16px",
262274
},
263275
"borders": {
264-
"1": "1px solid var(--color-secondary)",
265-
"2": "2px solid var(--color-secondary)",
276+
"1": "1px solid var(--color-border-primary)",
277+
"2": "2px solid var(--color-border-primary)",
266278
},
267279
"breakpoints": {
268280
"lg": "@media only screen and (min-width: 1200px)",
@@ -289,6 +301,10 @@ exports[`themes admin - theme shape 1`] = `
289301
"blue-400": "var(--color-blue-400)",
290302
"blue-500": "var(--color-blue-500)",
291303
"blue-800": "var(--color-blue-800)",
304+
"border-disabled": "var(--color-border-disabled)",
305+
"border-primary": "var(--color-border-primary)",
306+
"border-secondary": "var(--color-border-secondary)",
307+
"border-tertiary": "var(--color-border-tertiary)",
292308
"danger": "var(--color-danger)",
293309
"danger-hover": "var(--color-danger-hover)",
294310
"feedback-error": "var(--color-feedback-error)",
@@ -413,6 +429,10 @@ monospace",
413429
"background-hover": "white-200",
414430
"background-primary": "navy-900",
415431
"background-selected": "white-100",
432+
"border-disabled": "white-500",
433+
"border-primary": "white",
434+
"border-secondary": "white-600",
435+
"border-tertiary": "white-300",
416436
"danger": "red-0",
417437
"danger-hover": "red-100",
418438
"feedback-error": "red-0",
@@ -440,6 +460,10 @@ monospace",
440460
"background-hover": "navy-200",
441461
"background-primary": "beige",
442462
"background-selected": "navy-100",
463+
"border-disabled": "navy-500",
464+
"border-primary": "navy-800",
465+
"border-secondary": "navy-600",
466+
"border-tertiary": "navy-300",
443467
"danger": "red-500",
444468
"danger-hover": "red-600",
445469
"feedback-error": "red-600",
@@ -565,6 +589,10 @@ exports[`themes core - theme shape 1`] = `
565589
"background-hover": "rgba(255,255,255,0.09)",
566590
"background-primary": "#0A0D1C",
567591
"background-selected": "rgba(255,255,255,0.04)",
592+
"border-disabled": "rgba(255,255,255,0.5)",
593+
"border-primary": "#ffffff",
594+
"border-secondary": "rgba(255,255,255,0.65)",
595+
"border-tertiary": "rgba(255,255,255,0.2)",
568596
"danger": "#E85D7F",
569597
"danger-hover": "#DC5879",
570598
"feedback-error": "#E85D7F",
@@ -592,6 +620,10 @@ exports[`themes core - theme shape 1`] = `
592620
"background-hover": "rgba(16,22,47,0.12)",
593621
"background-primary": "#FFF0E5",
594622
"background-selected": "rgba(16,22,47,0.04)",
623+
"border-disabled": "rgba(16,22,47,0.63)",
624+
"border-primary": "#10162F",
625+
"border-secondary": "rgba(16,22,47,0.75)",
626+
"border-tertiary": "rgba(16,22,47,0.28)",
595627
"danger": "#E91C11",
596628
"danger-hover": "#BE1809",
597629
"feedback-error": "#BE1809",
@@ -622,6 +654,10 @@ exports[`themes core - theme shape 1`] = `
622654
"--color-background-hover": "var(--color-navy-200)",
623655
"--color-background-primary": "var(--color-beige)",
624656
"--color-background-selected": "var(--color-navy-100)",
657+
"--color-border-disabled": "var(--color-navy-500)",
658+
"--color-border-primary": "var(--color-navy-800)",
659+
"--color-border-secondary": "var(--color-navy-600)",
660+
"--color-border-tertiary": "var(--color-navy-300)",
625661
"--color-danger": "var(--color-red-500)",
626662
"--color-danger-hover": "var(--color-red-600)",
627663
"--color-feedback-error": "var(--color-red-600)",
@@ -737,8 +773,8 @@ exports[`themes core - theme shape 1`] = `
737773
"xl": "16px",
738774
},
739775
"borders": {
740-
"1": "1px solid var(--color-secondary)",
741-
"2": "2px solid var(--color-secondary)",
776+
"1": "1px solid var(--color-border-primary)",
777+
"2": "2px solid var(--color-border-primary)",
742778
},
743779
"breakpoints": {
744780
"lg": "@media only screen and (min-width: 1200px)",
@@ -765,6 +801,10 @@ exports[`themes core - theme shape 1`] = `
765801
"blue-400": "var(--color-blue-400)",
766802
"blue-500": "var(--color-blue-500)",
767803
"blue-800": "var(--color-blue-800)",
804+
"border-disabled": "var(--color-border-disabled)",
805+
"border-primary": "var(--color-border-primary)",
806+
"border-secondary": "var(--color-border-secondary)",
807+
"border-tertiary": "var(--color-border-tertiary)",
768808
"danger": "var(--color-danger)",
769809
"danger-hover": "var(--color-danger-hover)",
770810
"feedback-error": "var(--color-feedback-error)",
@@ -889,6 +929,10 @@ monospace",
889929
"background-hover": "white-200",
890930
"background-primary": "navy-900",
891931
"background-selected": "white-100",
932+
"border-disabled": "white-500",
933+
"border-primary": "white",
934+
"border-secondary": "white-600",
935+
"border-tertiary": "white-300",
892936
"danger": "red-0",
893937
"danger-hover": "red-100",
894938
"feedback-error": "red-0",
@@ -916,6 +960,10 @@ monospace",
916960
"background-hover": "navy-200",
917961
"background-primary": "beige",
918962
"background-selected": "navy-100",
963+
"border-disabled": "navy-500",
964+
"border-primary": "navy-800",
965+
"border-secondary": "navy-600",
966+
"border-tertiary": "navy-300",
919967
"danger": "red-500",
920968
"danger-hover": "red-600",
921969
"feedback-error": "red-600",
@@ -1051,6 +1099,10 @@ exports[`themes platform - theme shape 1`] = `
10511099
"background-hover": "rgba(255,255,255,0.09)",
10521100
"background-primary": "#0A0D1C",
10531101
"background-selected": "rgba(255,255,255,0.04)",
1102+
"border-disabled": "rgba(255,255,255,0.5)",
1103+
"border-primary": "#ffffff",
1104+
"border-secondary": "rgba(255,255,255,0.65)",
1105+
"border-tertiary": "rgba(255,255,255,0.2)",
10541106
"danger": "#E85D7F",
10551107
"danger-hover": "#DC5879",
10561108
"editor-annotation": "#E85D7F",
@@ -1103,6 +1155,10 @@ exports[`themes platform - theme shape 1`] = `
11031155
"background-hover": "rgba(16,22,47,0.12)",
11041156
"background-primary": "#FFF0E5",
11051157
"background-selected": "rgba(16,22,47,0.04)",
1158+
"border-disabled": "rgba(16,22,47,0.63)",
1159+
"border-primary": "#10162F",
1160+
"border-secondary": "rgba(16,22,47,0.75)",
1161+
"border-tertiary": "rgba(16,22,47,0.28)",
11061162
"danger": "#E91C11",
11071163
"danger-hover": "#BE1809",
11081164
"editor-annotation": "#E91C11",
@@ -1158,6 +1214,10 @@ exports[`themes platform - theme shape 1`] = `
11581214
"--color-background-hover": "var(--color-white-200)",
11591215
"--color-background-primary": "var(--color-navy-900)",
11601216
"--color-background-selected": "var(--color-white-100)",
1217+
"--color-border-disabled": "var(--color-white-500)",
1218+
"--color-border-primary": "var(--color-white)",
1219+
"--color-border-secondary": "var(--color-white-600)",
1220+
"--color-border-tertiary": "var(--color-white-300)",
11611221
"--color-danger": "var(--color-red-0)",
11621222
"--color-danger-hover": "var(--color-red-100)",
11631223
"--color-editor-annotation": "var(--color-red-0)",
@@ -1308,8 +1368,8 @@ exports[`themes platform - theme shape 1`] = `
13081368
"xl": "16px",
13091369
},
13101370
"borders": {
1311-
"1": "1px solid var(--color-secondary)",
1312-
"2": "2px solid var(--color-secondary)",
1371+
"1": "1px solid var(--color-border-primary)",
1372+
"2": "2px solid var(--color-border-primary)",
13131373
},
13141374
"breakpoints": {
13151375
"lg": "@media only screen and (min-width: 1200px)",
@@ -1337,6 +1397,10 @@ exports[`themes platform - theme shape 1`] = `
13371397
"blue-400": "var(--color-blue-400)",
13381398
"blue-500": "var(--color-blue-500)",
13391399
"blue-800": "var(--color-blue-800)",
1400+
"border-disabled": "var(--color-border-disabled)",
1401+
"border-primary": "var(--color-border-primary)",
1402+
"border-secondary": "var(--color-border-secondary)",
1403+
"border-tertiary": "var(--color-border-tertiary)",
13401404
"danger": "var(--color-danger)",
13411405
"danger-hover": "var(--color-danger-hover)",
13421406
"editor-annotation": "var(--color-editor-annotation)",
@@ -1495,6 +1559,10 @@ monospace",
14951559
"background-hover": "white-200",
14961560
"background-primary": "navy-900",
14971561
"background-selected": "white-100",
1562+
"border-disabled": "white-500",
1563+
"border-primary": "white",
1564+
"border-secondary": "white-600",
1565+
"border-tertiary": "white-300",
14981566
"danger": "red-0",
14991567
"danger-hover": "red-100",
15001568
"editor-annotation": "red-0",
@@ -1547,6 +1615,10 @@ monospace",
15471615
"background-hover": "navy-200",
15481616
"background-primary": "beige",
15491617
"background-selected": "navy-100",
1618+
"border-disabled": "navy-500",
1619+
"border-primary": "navy-800",
1620+
"border-secondary": "navy-600",
1621+
"border-tertiary": "navy-300",
15501622
"danger": "red-500",
15511623
"danger-hover": "red-600",
15521624
"editor-annotation": "red-500",

‎packages/gamut-styles/src/themes/core.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ export const coreTheme = createTheme({
7272
_: 'hyper-500',
7373
hover: 'hyper-400',
7474
},
75+
border: {
76+
primary: 'navy-800',
77+
secondary: 'navy-600',
78+
tertiary: 'navy-300',
79+
disabled: 'navy-500',
80+
}
7581
},
7682
dark: {
7783
text: {
@@ -115,11 +121,17 @@ export const coreTheme = createTheme({
115121
_: 'yellow-500',
116122
hover: 'yellow-400',
117123
},
124+
border: {
125+
primary: 'white',
126+
secondary: 'white-600',
127+
tertiary: 'white-300',
128+
disabled: 'white-500',
129+
}
118130
},
119131
})
120132
.addScale('borders', ({ colors }) => ({
121-
1: `1px solid ${colors.secondary}`,
122-
2: `2px solid ${colors.secondary}`,
133+
1: `1px solid ${colors['border-primary']}`,
134+
2: `2px solid ${colors['border-primary']}`,
123135
}))
124136
.createScaleVariables('elements')
125137
.build();

‎packages/gamut/src/Badge/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ const colorVariants = variant({
3434
},
3535
tertiary: {
3636
border: 1,
37-
borderColor: 'text-secondary',
37+
borderColor: 'border-secondary',
3838
color: 'text-secondary',
3939
bg: 'transparent',
4040
},
4141
tertiaryFill: {
4242
border: 1,
43-
borderColor: 'text-secondary',
43+
borderColor: 'border-secondary',
4444
color: 'text-secondary',
4545
bg: 'background',
4646
},

‎packages/gamut/src/Button/shared/variants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const fillButtonVariants = templateVariants(
2121
transition: hoverBackgroundTransition,
2222
},
2323
[ButtonSelectors.ACTIVE]: {
24-
borderColor: 'text',
24+
borderColor: 'border-primary',
2525
bg: variant,
2626
color: 'background',
2727
},

‎packages/gamut/src/Card/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export const Card: React.FC<CardProps> = ({ variant, ...rest }) => {
123123
<CardWrapper
124124
bg={variant}
125125
border={1}
126-
borderColor="navy"
126+
borderColor="border-primary"
127127
borderRadius="md"
128128
p={16}
129129
outline={variant === 'navy'}

‎packages/gamut/src/Form/__tests__/SelectDropdown.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
EarthIcon,
55
} from '@codecademy/gamut-icons';
66
import { setupRtl } from '@codecademy/gamut-tests';
7-
import { fireEvent, queryByAttribute } from '@testing-library/dom';
7+
import { fireEvent } from '@testing-library/dom';
88
import { act } from 'react';
99

1010
import { SelectDropdown } from '../SelectDropdown';

‎packages/gamut/src/Form/styles/shared-system-props.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,13 +73,13 @@ export const formBaseFieldStylesObject = {
7373
'ease-in-out'
7474
),
7575
border: 1,
76-
borderColor: 'text-disabled',
76+
borderColor: 'border-disabled',
7777
borderRadius: 'md',
7878
[InputSelectors.HOVER]: {
7979
borderColor: 'primary',
8080
},
8181
[InputSelectors.PLACEHOLDER]: {
82-
borderColor: 'text-disabled',
82+
borderColor: 'border-disabled',
8383
fontStyle: 'italic',
8484
},
8585
[InputSelectors.DISABLED]: {

‎packages/gamut/src/GridForm/GridFormSections/GridFormSectionBreak.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const GridFormSectionBreak: React.FC = () => {
1818
borderTop="none"
1919
borderX="none"
2020
border={1}
21-
borderColorBottom="text"
21+
borderColorBottom="border-primary"
2222
data-testid="form-section-break"
2323
width="100%"
2424
/>

‎packages/gamut/src/Pagination/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const paginationBaseStyles = {
1717
color: 'text-disabled',
1818
bg: 'transparent',
1919
},
20-
[ButtonSelectors.OUTLINE]: { borderColor: 'text' },
20+
[ButtonSelectors.OUTLINE]: { borderColor: 'border-primary' },
2121
[ButtonSelectors.SHADOW_ACTIVE]: { opacity: 0 },
2222
[ButtonSelectors.SHADOW_HOVER]: { opacity: 0 },
2323
} as const;

‎packages/gamut/src/ProgressBar/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,11 @@ const progressBarBackgroundVariants = variant({
9090
variants: {
9191
blue: {
9292
bg: 'navy',
93-
borderColor: 'navy',
93+
borderColor: 'border-primary',
9494
},
9595
yellow: {
9696
bg: 'gray-100',
97-
borderColor: 'navy',
97+
borderColor: 'border-primary',
9898
},
9999
default: {},
100100
},

0 commit comments

Comments
 (0)