Skip to content

Commit

Permalink
feat(theme): update palette
Browse files Browse the repository at this point in the history
  • Loading branch information
@moecasts
moecasts committed Jun 29, 2024
1 parent 25c3253 commit 91a2ede
Show file tree
Hide file tree
Showing 12 changed files with 56 additions and 44 deletions.
2 changes: 1 addition & 1 deletion packages/casts-progress/src/components/styles/circular.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
}

&-circle-track {
stroke: $color-surface-component-disabled;
stroke: $color-surface-component-default;
}

&-text {
Expand Down
9 changes: 5 additions & 4 deletions packages/casts-theme-generator/src/components/hooks/use-theme-generator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const useThemeGenerator = (props: UseThemeGeneratorProps) => {
props,
'mode',
props.onModeChange || noop,
'light',
'default',
);

const { circleTransition } = useCircleTransition();
Expand All @@ -66,14 +66,15 @@ export const useThemeGenerator = (props: UseThemeGeneratorProps) => {
/* --------------------------------- events ---------------------------------------- */

const debounceGeneratePalettes = useDebounceFn(
(mainColors: MainColor[], mode: ThemeMode = 'light') => {
(mainColors: MainColor[], mode: ThemeMode = 'default') => {
const update = () => {
const reverse = mode === 'dark' ? true : false;

const palettes = generatePalettes(mainColors, reverse);

const cssCodes = toCssVariables(palettes);
document.documentElement.setAttribute('theme-mode', 'custom');
document.documentElement.setAttribute('theme-mode', mode);
document.documentElement.setAttribute('theme-palette', 'custom');
appendThemeVariablesToHead(cssCodes);
};

Expand Down Expand Up @@ -104,7 +105,7 @@ export const useThemeGenerator = (props: UseThemeGeneratorProps) => {
};

const handleModeChange = (reverse: boolean) => {
const mode = reverse ? 'dark' : 'light';
const mode = reverse ? 'dark' : 'default';
setMode(mode);

debounceGeneratePalettes.run(mainColors, mode);
Expand Down
4 changes: 2 additions & 2 deletions packages/casts-theme-generator/src/components/types/theme-generator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { BaseComponentProps } from '@casts/common';

import { MainColor } from './common';

export type ThemeMode = 'light' | 'dark';
export type ThemeMode = 'default' | 'dark';

export type UseThemeGeneratorProps = BaseComponentProps & {
/**
* mode switchable: light or dark
* mode switchable: default or dark
*/
modeSwitchable?: boolean;

Expand Down
2 changes: 1 addition & 1 deletion packages/casts-theme-generator/src/components/utils/generate-palette.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ export const toCssVariables = (palettes: Palettes) => {
};

const cssVariables =
':root[theme-mode="custom"] {\n' +
':root[theme-palette="custom"] {\n' +
reduce(
palettes,
(allCode, palette, category) => {
Expand Down
17 changes: 11 additions & 6 deletions packages/casts-theme/src/builder/formatters/scss-with-css-variables.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const scssWithCssVariablesFormat: Formatter = (args) => {

const darkSelector = `${selector}[theme-mode="dark"]`;

const darkColors = formatHelpers
const darkTokens = formatHelpers
.formattedVariables({
format: 'css',
dictionary: {
Expand All @@ -19,19 +19,24 @@ export const scssWithCssVariablesFormat: Formatter = (args) => {
return token.darkValue;
})
.map((token) => {
const { value: _value, ...restToken } = token;
const { value: _value, darkValue, original, ...restToken } = token;

return {
...restToken,
value: token.darkValue,
value: darkValue,
original: {
...original,
value: original.darkValue,
},
};
}),
},
outputReferences,
})
.replace(new RegExp(`--${prefix}`, 'g'), '--#{$prefix-cls}');

const darkColorsCss =
darkSelector && darkColors ? `${darkSelector} {\n${darkColors}\n}\n` : '';
const darkTokensCss =
darkSelector && darkTokens ? `${darkSelector} {\n${darkTokens}\n}\n` : '';

return [
formatHelpers.fileHeader({ file, commentStyle: 'short' }),
Expand All @@ -46,6 +51,6 @@ export const scssWithCssVariablesFormat: Formatter = (args) => {
})
.replace(new RegExp(`--${prefix}`, 'g'), '--#{$prefix-cls}') +
'\n}\n',
darkColorsCss,
darkTokensCss,
].join('\n');
};
3 changes: 1 addition & 2 deletions packages/casts-theme/src/tokens/components/checkbox/checkbox.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"color": {
"surface": {
"disabled": {
"value": "{color.surface.container.disabled}"
"value": "{color.surface.component.disabled}"
}
},
"border": {
Expand Down Expand Up @@ -46,7 +46,6 @@
"disabled": {
"value": "{color.shape.neutral.disabled}"
},

"text": {
"active": {
"value": "{color.text.anti}"
Expand Down
2 changes: 1 addition & 1 deletion packages/casts-theme/src/tokens/components/radio/radio.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"color": {
"surface": {
"disabled": {
"value": "{color.surface.container.disabled}"
"value": "{color.surface.component.disabled}"
}
},
"border": {
Expand Down
2 changes: 1 addition & 1 deletion packages/casts-theme/src/tokens/components/tag/tag.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@
"value": "{color.text.neutral.disabled}"
},
"on-solid": {
"value": "{color.text.anti-disabled}"
"value": "{color.text.anti}"
}
}
}
Expand Down
30 changes: 13 additions & 17 deletions packages/casts-theme/src/tokens/core/color.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,20 +145,16 @@
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.0}"
"value": "{color.palette.neutral.100}",
"darkValue": "{color.palette.neutral.50}"
},
"container": {
"default": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.50}"
},
"disabled": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.200}"
"value": "{color.palette.neutral.0}",
"darkValue": "{color.palette.neutral.100}"
},
"anti": {
"attributes": {
Expand All @@ -172,33 +168,33 @@
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.200}"
"value": "{color.palette.neutral.150}"
}
},
"component": {
"default": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.300}"
"value": "{color.palette.neutral.200}"
},
"hover": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.400}"
"value": "{color.palette.neutral.300}"
},
"active": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.300}"
"value": "{color.palette.neutral.200}"
},
"disabled": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.200}"
"value": "{color.palette.neutral.150}"
}
}
},
Expand Down Expand Up @@ -390,25 +386,25 @@
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.400}"
"value": "{color.palette.neutral.300}"
},
"hover": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.400}"
"value": "{color.palette.neutral.300}"
},
"active": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.400}"
"value": "{color.palette.neutral.300}"
},
"disabled": {
"attributes": {
"category": "color"
},
"value": "{color.palette.neutral.300}"
"value": "{color.palette.neutral.200}"
}
},
"divider": {
Expand Down
26 changes: 18 additions & 8 deletions packages/casts-theme/src/tokens/core/palette.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,39 +265,43 @@
},
"100": {
"value": "0, 0%, 97%",
"darkValue": "0, 0%, 6%"
"darkValue": "0, 0%, 5%"
},
"150": {
"value": "0, 0%, 96.5%",
"darkValue": "0, 0%, 8%"
},
"200": {
"value": "0, 0%, 95%",
"darkValue": "0, 0%, 10%"
"darkValue": "0, 0%, 15%"
},
"300": {
"value": "0, 0%, 93%",
"darkValue": "0, 0%, 13%"
"darkValue": "0, 0%, 18%"
},
"400": {
"value": "0, 0%, 90%",
"darkValue": "0, 0%, 18%"
"darkValue": "0, 0%, 21%"
},
"500": {
"value": "0, 0%, 60%",
"darkValue": "0, 0%, 35%"
},
"600": {
"value": "0, 0%, 40%",
"darkValue": "0, 0%, 70%"
"darkValue": "0, 0%, 75%"
},
"700": {
"value": "0, 0%, 28%",
"darkValue": "0, 0%, 75%"
"darkValue": "0, 0%, 78%"
},
"800": {
"value": "0, 0%, 18%",
"darkValue": "0, 0%, 86%"
"darkValue": "0, 0%, 87%"
},
"900": {
"value": "0, 0%, 6%",
"darkValue": "0, 0%, 93%"
"darkValue": "0, 0%, 95%"
},
"1000": {
"value": "0, 0%, 0%",
Expand Down Expand Up @@ -696,6 +700,12 @@
},
"value": "hsl({color.palette.hsl.neutral.100})"
},
"150": {
"attributes": {
"category": "color"
},
"value": "hsl({color.palette.hsl.neutral.150})"
},
"200": {
"attributes": {
"category": "color"
Expand Down
2 changes: 1 addition & 1 deletion site/packages/rd-theme/src/components/doc-features/float-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const FloatButton = () => {
const [themeGeneratorVisible, setThemeGeneratorVisible] = useState(false);

const [themeMode, setThemeMode] = useState<ThemeMode>(() => {
return themeStorage.get()?.mode || 'light';
return themeStorage.get()?.mode || 'default';
});

const [themeMainColors, setThemeMainColors] = useState<MainColor[]>(() => {
Expand Down
1 change: 1 addition & 0 deletions site/packages/rd-theme/src/components/store/provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const AppProvider: FC<{ children: ReactNode }> = (props) => {
}

document.documentElement.setAttribute('theme-mode', appContext.themeMode);
document.documentElement.removeAttribute('theme-palette');
}, [appContext.themeMode]);

return (
Expand Down

0 comments on commit 91a2ede

Please sign in to comment.