Skip to content

Commit c217cbf

Browse files
minheqminheq
committed
feat(colors): rename colors
1 parent 6dc4539 commit c217cbf

15 files changed

Lines changed: 2135 additions & 1851 deletions

File tree

‎docs/CustomizeTheme.mdx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import { ThemeProvider, createTheme } from 'paramount-ui'
1515
const theme = createTheme({
1616
colors: {
1717
background: {
18-
white: 'white',
18+
base: 'white',
19+
content: 'white',
1920
overlay: 'rgba(0,0,0,0.3)',
2021
2122
greyLight: palette.neutral.lightest,
@@ -30,9 +31,9 @@ const theme = createTheme({
3031
secondaryDefault: palette.orange.base,
3132
secondaryDark: palette.orange.dark,
3233
33-
errorLight: palette.red.lightest,
34-
errorDefault: palette.red.base,
35-
errorDark: palette.red.dark,
34+
dangerLight: palette.red.lightest,
35+
dangerDefault: palette.red.base,
36+
dangerDark: palette.red.dark,
3637
3738
infoLight: palette.blue.lightest,
3839
infoDefault: palette.blue.base,
@@ -49,20 +50,18 @@ const theme = createTheme({
4950
5051
border: {
5152
default: palette.neutral.light,
52-
dark: '#EDF0F2',
5353
5454
primary: palette.teal.darkest,
5555
secondary: palette.orange.darkest,
5656
57-
error: palette.red.darkest,
57+
danger: palette.red.darkest,
5858
info: palette.blue.darkest,
5959
success: palette.green.darkest,
6060
warning: palette.orange.darkest,
6161
},
6262
6363
text: {
6464
link: palette.neutral.darkest,
65-
dark: palette.neutral.darkest,
6665
default: palette.neutral.darkest,
6766
muted: palette.neutral.dark,
6867
white: 'white',
@@ -71,7 +70,7 @@ const theme = createTheme({
7170
primary: palette.teal.darkest,
7271
secondary: palette.orange.darkest,
7372
74-
error: palette.red.darkest,
73+
danger: palette.red.darkest,
7574
info: palette.blue.darkest,
7675
success: palette.green.darkest,
7776
warning: palette.orange.darkest,

‎src/components/Alert/Alert.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const alertVariables = (theme: Theme): AlertVariables => {
3030
flex: 1,
3131
},
3232
container: {
33-
backgroundColor: theme.colors.background.white,
33+
backgroundColor: theme.colors.background.content,
3434
borderLeftWidth: 5,
3535
borderRadius: theme.controlBorderRadius.medium,
3636
display: 'flex',

‎src/components/Button/Button.styles.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -55,26 +55,26 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
5555
appearances: {
5656
minimal: {
5757
default: {
58-
backgroundColor: theme.colors.background.white,
58+
backgroundColor: theme.colors.background.content,
5959
color: theme.colors.text.default,
6060

6161
focusColor: theme.colors.background.greyDefault,
6262
},
6363

6464
danger: {
65-
backgroundColor: theme.colors.background.white,
65+
backgroundColor: theme.colors.background.content,
6666
color: theme.colors.text.danger,
6767

6868
focusColor: theme.colors.background.greyDefault,
6969
},
7070
primary: {
71-
backgroundColor: theme.colors.background.white,
71+
backgroundColor: theme.colors.background.content,
7272
color: theme.colors.text.primary,
7373

7474
focusColor: theme.colors.background.greyDefault,
7575
},
7676
secondary: {
77-
backgroundColor: theme.colors.background.white,
77+
backgroundColor: theme.colors.background.content,
7878
color: theme.colors.text.secondary
7979
? theme.colors.text.secondary
8080
: theme.colors.text.default,
@@ -95,7 +95,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
9595
danger: {
9696
backgroundColor: theme.colors.background.dangerDefault,
9797
borderColor: theme.colors.border.danger,
98-
color: 'white',
98+
color: theme.colors.text.white,
9999

100100
focusColor: theme.colors.background.dangerDark,
101101
loadingBackgroundColor: theme.colors.background.dangerLight,
@@ -104,7 +104,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
104104
primary: {
105105
backgroundColor: theme.colors.background.primaryDefault,
106106
borderColor: theme.colors.border.primary,
107-
color: 'white',
107+
color: theme.colors.text.white,
108108

109109
focusColor: theme.colors.background.primaryDark,
110110
loadingBackgroundColor: theme.colors.background.primaryLight,
@@ -113,7 +113,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
113113
secondary: {
114114
backgroundColor: theme.colors.background.secondaryDefault,
115115
borderColor: theme.colors.border.secondary,
116-
color: 'white',
116+
color: theme.colors.text.white,
117117

118118
focusColor: theme.colors.background.secondaryDark,
119119
loadingBackgroundColor: theme.colors.background.secondaryLight,
@@ -122,7 +122,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
122122

123123
outline: {
124124
default: {
125-
backgroundColor: theme.colors.background.white,
125+
backgroundColor: theme.colors.background.content,
126126
borderColor: theme.colors.text.default,
127127
borderWidth: 3,
128128
color: theme.colors.text.default,
@@ -131,7 +131,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
131131
},
132132

133133
danger: {
134-
backgroundColor: theme.colors.background.white,
134+
backgroundColor: theme.colors.background.content,
135135
borderColor: theme.colors.border.danger,
136136
borderWidth: 3,
137137
color: theme.colors.text.danger,
@@ -140,7 +140,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
140140
},
141141

142142
primary: {
143-
backgroundColor: theme.colors.background.white,
143+
backgroundColor: theme.colors.background.content,
144144
borderColor: theme.colors.border.primary,
145145
borderWidth: 3,
146146
color: theme.colors.text.primary,
@@ -149,7 +149,7 @@ export const getButtonVariables = (theme: Theme): ButtonVariables => {
149149
},
150150

151151
secondary: {
152-
backgroundColor: theme.colors.background.white,
152+
backgroundColor: theme.colors.background.content,
153153
borderColor: theme.colors.border.secondary,
154154
borderWidth: 3,
155155
color: theme.colors.text.secondary,

‎src/components/Checkbox/Checkbox.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface CheckboxVariables {
2020
export const getCheckboxVariables = (theme: Theme): CheckboxVariables => {
2121
return {
2222
base: {
23-
backgroundColor: theme.colors.background.white,
23+
backgroundColor: theme.colors.background.content,
2424
borderColor: theme.colors.border.default,
2525
borderWidth: 1,
2626
height: 32,

‎src/components/Counter/Counter.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const getCounterVariables = (theme: Theme): CounterVariables => {
2929
width: 40,
3030
},
3131
disabled: {
32-
borderColor: theme.colors.border.dark,
32+
borderColor: theme.colors.border.default,
3333
},
3434
};
3535
};

‎src/components/Inputs/PhoneNumberInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
6868
getStyles={() => ({
6969
buttonStyle: {
7070
borderBottomRightRadius: 0,
71-
borderColor: theme.colors.border.dark,
71+
borderColor: theme.colors.border.default,
7272
borderTopRightRadius: 0,
7373
borderWidth: 1,
7474
},

‎src/components/Inputs/TextInput.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export interface TextInputVariables {
3030
export const getTextInputVariables = (theme: Theme): TextInputVariables => {
3131
return {
3232
base: {
33-
backgroundColor: theme.colors.background.white,
33+
backgroundColor: theme.colors.background.content,
3434
borderColor: theme.colors.border.default,
3535
borderWidth: 1,
3636
color: theme.colors.text.default,

‎src/components/ListItem/ListItem.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export interface ListItemVariables {
3232
export const getListItemVariables = (theme: Theme): ListItemVariables => {
3333
return {
3434
base: {
35-
backgroundColor: theme.colors.background.white,
35+
backgroundColor: theme.colors.background.content,
3636
borderBottomWidth: 1,
3737
borderColor: theme.colors.border.default,
3838
justifyContent: 'center',

‎src/components/Pickers/PickerButton.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const getPickerButtonStyles: GetPickerButtonStyles = (
9696

9797
return {
9898
containerStyle: {
99-
backgroundColor: theme.colors.background.white,
99+
backgroundColor: theme.colors.background.content,
100100
position: 'relative',
101101
},
102102
itemStyle: {

‎src/components/Popover/Popover.styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export interface PopoverVariables {
99
export const getPopoverVariables = (theme: Theme): PopoverVariables => {
1010
return {
1111
popover: {
12-
backgroundColor: theme.colors.background.white,
12+
backgroundColor: theme.colors.background.content,
1313
padding: 16,
1414
...theme.elevations[2],
1515
},

0 commit comments

Comments
 (0)