Skip to content

Commit 7f381ae

Browse files
whaleinvasionwhaleinvasion
committed
changed colors theme
1 parent 2094083 commit 7f381ae

File tree

70 files changed

+146
-125
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+146
-125
lines changed

‎theme/components/Alert/Alert.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const Alert = defineMultiStyleConfig({
9090
variants,
9191
defaultProps: {
9292
variant: 'subtle',
93-
colorScheme: 'blue',
93+
colorScheme: 'brand',
9494
},
9595
});
9696

‎theme/components/Button/Button.pw.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ test.use({ viewport: { width: 150, height: 350 } });
88
[
99
{ variant: 'solid', states: [ 'default', 'disabled', 'hovered', 'active' ] },
1010
{ variant: 'outline', colorScheme: 'gray', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
11-
{ variant: 'outline', colorScheme: 'blue', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
11+
{ variant: 'outline', colorScheme: 'brand', withDarkMode: true, states: [ 'default', 'disabled', 'hovered', 'active', 'selected' ] },
1212
{ variant: 'simple', withDarkMode: true, states: [ 'default', 'hovered' ] },
1313
{ variant: 'ghost', withDarkMode: true, states: [ 'default', 'hovered', 'active' ] },
1414
{ variant: 'subtle', states: [ 'default', 'hovered' ] },

‎theme/components/Button/Button.ts‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ const variantOutline = defineStyle((props) => {
4141
const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
4242
const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
4343

44-
const selectedBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
45-
const selectedColor = mode('blue.600', 'gray.50')(props);
44+
const selectedBg = isGrayTheme ? mode('brand.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
45+
const selectedColor = mode('brand.600', 'gray.50')(props);
4646

4747
return {
4848
color,
@@ -154,35 +154,33 @@ const variantSubtle = defineStyle((props) => {
154154

155155
// for buttons in the hero banner
156156
const variantHero = defineStyle((props) => {
157-
158-
const buttonConfig = config.UI.homepage.heroBanner?.button;
159157
return {
160158
bg: mode(
161-
buttonConfig?._default?.background?.[0] || 'blue.600',
162-
buttonConfig?._default?.background?.[1] || buttonConfig?._default?.background?.[0] || 'blue.600',
159+
config.UI.homepage.heroBanner?.button?._default?.background?.[0] || 'brand.600',
160+
config.UI.homepage.heroBanner?.button?._default?.background?.[1] || 'brand.600',
163161
)(props),
164162
color: mode(
165-
buttonConfig?._default?.text_color?.[0] || 'white',
166-
buttonConfig?._default?.text_color?.[1] || buttonConfig?._default?.text_color?.[0] || 'white',
163+
config.UI.homepage.heroBanner?.button?._default?.text_color?.[0] || 'white',
164+
config.UI.homepage.heroBanner?.button?._default?.text_color?.[1] || 'white',
167165
)(props),
168166
_hover: {
169167
bg: mode(
170-
buttonConfig?._hover?.background?.[0] || 'blue.400',
171-
buttonConfig?._hover?.background?.[1] || buttonConfig?._hover?.background?.[0] || 'blue.400',
168+
config.UI.homepage.heroBanner?.button?._hover?.background?.[0] || 'brand.400',
169+
config.UI.homepage.heroBanner?.button?._hover?.background?.[1] || 'brand.400',
172170
)(props),
173171
color: mode(
174-
buttonConfig?._hover?.text_color?.[0] || 'white',
175-
buttonConfig?._hover?.text_color?.[1] || buttonConfig?._hover?.text_color?.[0] || 'white',
172+
config.UI.homepage.heroBanner?.button?._hover?.text_color?.[0] || 'white',
173+
config.UI.homepage.heroBanner?.button?._hover?.text_color?.[1] || 'white',
176174
)(props),
177175
},
178176
'&[data-selected=true]': {
179177
bg: mode(
180-
buttonConfig?._selected?.background?.[0] || 'blue.50',
181-
buttonConfig?._selected?.background?.[1] || buttonConfig?._selected?.background?.[0] || 'blue.50',
178+
config.UI.homepage.heroBanner?.button?._selected?.background?.[0] || 'brand.50',
179+
config.UI.homepage.heroBanner?.button?._selected?.background?.[1] || 'brand.50',
182180
)(props),
183181
color: mode(
184-
buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
185-
buttonConfig?._selected?.text_color?.[1] || buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
182+
config.UI.homepage.heroBanner?.button?._selected?.text_color?.[0] || 'blackAlpha.800',
183+
config.UI.homepage.heroBanner?.button?._selected?.text_color?.[1] || 'blackAlpha.800',
186184
)(props),
187185
},
188186
};
@@ -269,7 +267,7 @@ const Button = defineStyleConfig({
269267
defaultProps: {
270268
variant: 'solid',
271269
size: 'md',
272-
colorScheme: 'blue',
270+
colorScheme: 'brand',
273271
},
274272
});
275273

‎theme/components/Menu.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const baseStyleItem = defineStyle({
3131
},
3232
},
3333
_hover: {
34-
[$bg.variable]: 'colors.blue.50',
34+
[$bg.variable]: 'colors.brand.50',
3535
_dark: {
3636
[$bg.variable]: 'colors.whiteAlpha.100',
3737
},

‎theme/components/Spinner.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const baseStyle = defineStyle((props) => {
55
const { emptyColor, color } = props;
66

77
return {
8-
borderColor: color || 'blue.500',
8+
borderColor: color || 'brand.500',
99
borderBottomColor: emptyColor || mode('blackAlpha.200', 'whiteAlpha.200')(props),
1010
borderLeftColor: emptyColor || mode('blackAlpha.200', 'whiteAlpha.200')(props),
1111
};

‎theme/components/Tabs.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ const variantSoftRounded = definePartsStyle((props) => {
1313
tab: {
1414
borderRadius: 'base',
1515
fontWeight: '600',
16-
color: mode('blue.700', 'gray.400')(props),
16+
color: mode('brand.700', 'gray.400')(props),
1717
_selected: {
18-
color: mode('blue.700', 'gray.50')(props),
19-
bg: mode('blue.50', 'gray.800')(props),
18+
color: mode('brand.700', 'gray.50')(props),
19+
bg: mode('brand.50', 'gray.800')(props),
2020
_hover: {
21-
color: mode('blue.700', 'gray.50')(props),
21+
color: mode('brand.700', 'gray.50')(props),
2222
},
2323
},
2424
_hover: {

‎theme/components/Tag/Tag.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ const variants = {
2222
bg: mode('gray.100', 'gray.800')(props),
2323
color: mode('gray.500', 'whiteAlpha.800')(props),
2424
_hover: {
25-
color: 'blue.400',
25+
color: 'brand.400',
2626
opacity: 0.76,
2727
},
2828
[`
2929
&[data-selected=true],
3030
&[data-selected=true][aria-selected=true]
3131
`]: {
32-
bg: mode('blue.500', 'blue.900')(props),
32+
bg: mode('brand.500', 'brand.900')(props),
3333
color: 'whiteAlpha.800',
3434
},
3535
},

‎theme/components/Tooltip/Tooltip.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const $arrowBg = cssVar('popper-arrow-bg');
88

99
const variantNav = defineStyle((props) => {
1010
return {
11-
bg: mode('blue.50', 'gray.800')(props),
12-
color: 'blue.400',
11+
bg: mode('brand.50', 'gray.800')(props),
12+
color: 'brand.400',
1313
padding: '15px 12px',
1414
minWidth: '120px',
1515
borderRadius: 'base',

‎theme/foundations/colors.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
11
const colors = {
2+
body: {
3+
color: '#FFFFFF',
4+
bg: '#0A0A0A',
5+
textPrimary: '#FFFFFF',
6+
textSecondary: '#9EA8BD',
7+
brand: '#55F89F',
8+
brandHover: '#55F89F',
9+
},
10+
brand: {
11+
'50': '#ddfdeb',
12+
'100': '#bbfcd8',
13+
'200': '#99fac5',
14+
'300': '#77f9b2',
15+
'400': '#55f89f',
16+
'500': '#15f57a',
17+
'600': '#07bf5b',
18+
'700': '#057f3c',
19+
'800': '#023f1e',
20+
'900': '#011f0f',
21+
},
222
green: {
323
'100': '#C6F6D5',
424
'400': '#48BB78',

‎theme/foundations/semanticTokens.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@ const semanticTokens = {
55
_dark: 'whiteAlpha.200',
66
},
77
text: {
8-
'default': 'blackAlpha.800',
9-
_dark: 'whiteAlpha.800',
8+
'default': 'body.textPrimary',
9+
_dark: 'body.textPrimary',
1010
},
1111
text_secondary: {
12-
'default': 'gray.500',
13-
_dark: 'gray.400',
12+
'default': 'body.textSecondary',
13+
_dark: 'body.textSecondary',
1414
},
1515
link: {
16-
'default': 'blue.600',
17-
_dark: 'blue.300',
16+
'default': 'body.brand',
17+
_dark: 'body.brand',
1818
},
1919
link_hovered: {
20-
'default': 'blue.400',
20+
'default': 'body.brandHover',
2121
},
2222
icon_link_external: {
23-
'default': 'gray.300',
24-
_dark: 'gray.500',
23+
'default': 'body.brand',
24+
_dark: 'body.brand',
2525
},
2626
icon_info: {
2727
'default': 'gray.400',

0 commit comments

Comments
 (0)