From 1023be7c19b98242f6ff6cda91ca57d655d52b2c Mon Sep 17 00:00:00 2001 From: takurinton Date: Wed, 27 Jul 2022 07:50:16 +0900 Subject: [PATCH 1/5] init --- src/components/Button/Button.tsx | 5 +- .../react-toast-notification/src/styled.ts | 2 +- src/styles/index.ts | 1 + src/styles/shadows.ts | 4 ++ src/themes/createTheme.ts | 8 ++- src/themes/palette.ts | 49 +++++++++++++++++++ 6 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 src/styles/shadows.ts diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index c9130dc38..a4a6703eb 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -67,11 +67,11 @@ const getContainerColorStyles = ( border: `1px solid ${theme.palette.divider}`, }, hover: { - background: theme.palette.gray.highlight, + background: theme.palette.secondary.highlight, border: `1px solid ${theme.palette.divider}`, }, active: { - background: theme.palette.gray.highlight, + background: theme.palette.secondary.highlight, boxShadow: `inset 0 2px ${hexToRgba(theme.palette.black, 0.16)}`, border: `1px solid ${theme.palette.divider}`, }, @@ -96,6 +96,7 @@ const getContainerColorStyles = ( border: "none", }, }, + // クリアボタンは一旦考えないようにします clear: { normal: { background: "none", diff --git a/src/lib/react-toast-notification/src/styled.ts b/src/lib/react-toast-notification/src/styled.ts index 3aac75714..3bea4864d 100644 --- a/src/lib/react-toast-notification/src/styled.ts +++ b/src/lib/react-toast-notification/src/styled.ts @@ -104,7 +104,7 @@ export const ToastElementInner = styled.div<{ }>` background-color: ${({ backgroundColor }) => backgroundColor}; border-radius: ${({ borderRadius }) => borderRadius}px; - box-shadow: 0 3px 8px rgba(0, 0, 0, 0.175); + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); color: ${({ color }) => color}; display: flex; margin-bottom: ${({ gutter }) => gutter}px; diff --git a/src/styles/index.ts b/src/styles/index.ts index e5892e1fa..cbaad2cf3 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1,5 +1,6 @@ export { Radius } from "./radius"; export { Space } from "./space"; +export { Shadows } from "./shadows"; export { BreakPoint } from "./breakPoint"; export { colors } from "./color"; export type { Color } from "./color"; diff --git a/src/styles/shadows.ts b/src/styles/shadows.ts new file mode 100644 index 000000000..75700e702 --- /dev/null +++ b/src/styles/shadows.ts @@ -0,0 +1,4 @@ +// shadows は正直 ms 側で参照しないからこっちで列挙しておけばなんとかなりそうな感じはする +// 実装する側は指定したいやつをこの中から探してくれ、それがない場合は自分で定義してくれって感じ +// ただ、色については palette のやつを使いたい感じがするので、もしかしたら引数取るかも +export const Shadows = ["none"]; diff --git a/src/themes/createTheme.ts b/src/themes/createTheme.ts index 0c41dfe01..858d125df 100644 --- a/src/themes/createTheme.ts +++ b/src/themes/createTheme.ts @@ -1,5 +1,5 @@ import { Palette, createPalette } from "./palette"; -import { Radius, Space, Depth } from "../styles"; +import { Radius, Space, Depth, Shadows } from "../styles"; import { DepthOptions, depth } from "../styles/depth"; import { deepmerge } from "../utils/deepmerge"; import { DeepPartial } from "../types"; @@ -8,6 +8,7 @@ export type ThemeOptions = { palette?: DeepPartial; spacing?: number; radius?: number; + shadows?: string[]; depth?: DepthOptions; }; @@ -15,6 +16,7 @@ export type Theme = { palette: Palette; spacing: number; radius: number; + shadows: string[]; depth: Depth; }; @@ -23,14 +25,16 @@ export function createTheme(options: ThemeOptions = {}): Theme { palette: paletteInput = {}, spacing: spacingInput, radius: radiusInput, + shadows: shadowsInput, ...other } = options; const palette = createPalette(paletteInput); const spacing = spacingInput || Space; const radius = radiusInput || Radius; + const shadows = shadowsInput || Shadows; - const theme = deepmerge({ palette, spacing, depth, radius }, other); + const theme = deepmerge({ palette, spacing, depth, radius, shadows }, other); return theme; } diff --git a/src/themes/palette.ts b/src/themes/palette.ts index 8e6c2da95..ddc403740 100644 --- a/src/themes/palette.ts +++ b/src/themes/palette.ts @@ -31,10 +31,24 @@ export type PaletteIcon = { line: string; }; +export type PaletteAction = { + active: string; + hover: string; + selected: string; + selectedOpacity: number; + disabled: string; + disabledBackground: string; + focus: string; + focusOpacity: number; + activeBackground: string; + hoverBackground: string; +}; + export type Palette = { white: string; black: string; primary: PaletteColor; + secondary: PaletteColor; success: PaletteColor; warning: PaletteColor; danger: PaletteColor; @@ -43,6 +57,10 @@ export type Palette = { background: PaletteBackground; divider: string; icon: PaletteIcon; + + // ========================= + action: PaletteAction; + border: PaletteColor; }; export const palette: Palette = { @@ -55,6 +73,13 @@ export const palette: Palette = { light: colors.blue[200], highlight: colors.blue[100], }, + secondary: { + deepDark: colors.basic[600], + dark: colors.basic[500], + main: colors.basic[300], + light: colors.basic[200], + highlight: colors.basic[100], + }, success: { deepDark: colors.green[700], dark: colors.green[600], @@ -96,12 +121,36 @@ export const palette: Palette = { active: colors.blue[100], hint: colors.blue[50] as string, // TODO }, + // divider は固定値でいい divider: colors.basic[400], icon: { active: colors.blue[500], fill: colors.basic[700], line: colors.basic[600], }, + + // ======= proposal ======= + // TODO: shadow + // WIP: 適当な候補だけ書いた + action: { + active: "rgba(0, 0, 0, 0.54)", + hover: "#F5F7F8", // basic[100] + selected: "rgba(0, 0, 0, 0.08)", + selectedOpacity: 0.08, + disabled: "rgba(0, 0, 0, 0.26)", + disabledBackground: colors.basic[200], + focus: "rgba(0, 0, 0, 0.12)", + focusOpacity: 0.12, + activeBackground: colors.basic[300], + hoverBackground: colors.basic[200], + }, + border: { + deepDark: colors.basic[600], + dark: colors.basic[500], + main: colors.basic[300], + light: colors.basic[200], + highlight: colors.basic[100], + }, }; export function createPalette(paletteInput: DeepPartial): Palette { From 94418a64c048827ef9b03b757940444a5897a3c8 Mon Sep 17 00:00:00 2001 From: takurinton Date: Mon, 8 Aug 2022 08:21:30 +0900 Subject: [PATCH 2/5] add: disabled of background --- src/components/ActionButton/ActionButton.tsx | 6 +++--- src/themes/palette.ts | 9 ++++----- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx index 54145e916..cd457bfea 100644 --- a/src/components/ActionButton/ActionButton.tsx +++ b/src/components/ActionButton/ActionButton.tsx @@ -16,7 +16,7 @@ const getNormalBackgroundColor = (theme: Theme) => ({ const getHoverBackgroundColor = (theme: Theme) => ({ primary: theme.palette.primary.highlight, warning: colors.red[200], - disabled: theme.palette.gray.light, + disabled: theme.palette.background.disabled, }); const getTextColor = (theme: Theme) => ({ @@ -38,7 +38,7 @@ const ActionButton = React.forwardRef( const getColorByDisabled = ( color: ColorProp, - disabled?: boolean, + disabled?: boolean ): ColorProp | "disabled" => { return disabled ? "disabled" : color; }; @@ -65,7 +65,7 @@ const ActionButton = React.forwardRef( ); - }, + } ); export default ActionButton; diff --git a/src/themes/palette.ts b/src/themes/palette.ts index ddc403740..9eaddcb52 100644 --- a/src/themes/palette.ts +++ b/src/themes/palette.ts @@ -23,6 +23,7 @@ export type PaletteBackground = { dark: string; active: string; hint: string; + disabled: string; }; export type PaletteIcon = { @@ -36,8 +37,6 @@ export type PaletteAction = { hover: string; selected: string; selectedOpacity: number; - disabled: string; - disabledBackground: string; focus: string; focusOpacity: number; activeBackground: string; @@ -120,6 +119,7 @@ export const palette: Palette = { dark: colors.blue[40] as string, // TODO active: colors.blue[100], hint: colors.blue[50] as string, // TODO + disabled: colors.basic[200], }, // divider は固定値でいい divider: colors.basic[400], @@ -129,6 +129,7 @@ export const palette: Palette = { line: colors.basic[600], }, + // opacity は全部 0.08 にする、 // ======= proposal ======= // TODO: shadow // WIP: 適当な候補だけ書いた @@ -137,10 +138,8 @@ export const palette: Palette = { hover: "#F5F7F8", // basic[100] selected: "rgba(0, 0, 0, 0.08)", selectedOpacity: 0.08, - disabled: "rgba(0, 0, 0, 0.26)", - disabledBackground: colors.basic[200], focus: "rgba(0, 0, 0, 0.12)", - focusOpacity: 0.12, + focusOpacity: 0.08, activeBackground: colors.basic[300], hoverBackground: colors.basic[200], }, From 60efe22a124dbac27fbae044a0754afb79b5a0d8 Mon Sep 17 00:00:00 2001 From: takurinton Date: Tue, 16 Aug 2022 08:56:36 +0900 Subject: [PATCH 3/5] ... --- src/components/ActionButton/ActionButton.tsx | 4 ++-- src/components/ToggleButton/styled.ts | 14 ++++++++------ src/themes/palette.ts | 6 ++++-- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx index cd457bfea..a0b5ce6f0 100644 --- a/src/components/ActionButton/ActionButton.tsx +++ b/src/components/ActionButton/ActionButton.tsx @@ -38,7 +38,7 @@ const ActionButton = React.forwardRef( const getColorByDisabled = ( color: ColorProp, - disabled?: boolean + disabled?: boolean, ): ColorProp | "disabled" => { return disabled ? "disabled" : color; }; @@ -65,7 +65,7 @@ const ActionButton = React.forwardRef( ); - } + }, ); export default ActionButton; diff --git a/src/components/ToggleButton/styled.ts b/src/components/ToggleButton/styled.ts index 3afe853a4..5078e885d 100644 --- a/src/components/ToggleButton/styled.ts +++ b/src/components/ToggleButton/styled.ts @@ -72,13 +72,15 @@ export const Label = styled.label` width: ${({ width }) => width}; height: calc(1px * 2 + 22px); background-color: ${({ active, disabled, theme }) => { - let backgroundColor = theme.palette.gray.highlight; - if (disabled) { - backgroundColor = theme.palette.gray.light; - } else if (active) { - backgroundColor = theme.palette.background.hint; + switch (true) { + case disabled: + return theme.palette.background.disabled; + case active: + // MEMO: background には元々 active っていうプロパティがあるんだけど、こういうのも修正しないといけない + return theme.palette.background.hint; + default: + return theme.palette.gray.highlight; } - return backgroundColor; }}; border: 1px solid ${({ active, disabled, theme }) => diff --git a/src/themes/palette.ts b/src/themes/palette.ts index 9eaddcb52..16eb844e7 100644 --- a/src/themes/palette.ts +++ b/src/themes/palette.ts @@ -24,6 +24,8 @@ export type PaletteBackground = { active: string; hint: string; disabled: string; + focus: string; + hover: string; }; export type PaletteIcon = { @@ -120,6 +122,8 @@ export const palette: Palette = { active: colors.blue[100], hint: colors.blue[50] as string, // TODO disabled: colors.basic[200], + hover: colors.basic[200], + focus: colors.basic[200], }, // divider は固定値でいい divider: colors.basic[400], @@ -130,8 +134,6 @@ export const palette: Palette = { }, // opacity は全部 0.08 にする、 - // ======= proposal ======= - // TODO: shadow // WIP: 適当な候補だけ書いた action: { active: "rgba(0, 0, 0, 0.54)", From 1aed0789cfc869768cd1dd8c94800d42a70fad86 Mon Sep 17 00:00:00 2001 From: takurinton Date: Tue, 23 Aug 2022 14:15:16 +0900 Subject: [PATCH 4/5] remove: border property --- src/themes/palette.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/themes/palette.ts b/src/themes/palette.ts index 16eb844e7..e1497281c 100644 --- a/src/themes/palette.ts +++ b/src/themes/palette.ts @@ -61,7 +61,6 @@ export type Palette = { // ========================= action: PaletteAction; - border: PaletteColor; }; export const palette: Palette = { @@ -145,13 +144,6 @@ export const palette: Palette = { activeBackground: colors.basic[300], hoverBackground: colors.basic[200], }, - border: { - deepDark: colors.basic[600], - dark: colors.basic[500], - main: colors.basic[300], - light: colors.basic[200], - highlight: colors.basic[100], - }, }; export function createPalette(paletteInput: DeepPartial): Palette { From 1031d17f702194404d19b33036c6cacbf5d3e846 Mon Sep 17 00:00:00 2001 From: takurinton Date: Wed, 24 Aug 2022 13:50:59 +0900 Subject: [PATCH 5/5] ... --- src/themes/palette.ts | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/src/themes/palette.ts b/src/themes/palette.ts index e1497281c..fe150ea54 100644 --- a/src/themes/palette.ts +++ b/src/themes/palette.ts @@ -38,11 +38,7 @@ export type PaletteAction = { active: string; hover: string; selected: string; - selectedOpacity: number; - focus: string; - focusOpacity: number; - activeBackground: string; - hoverBackground: string; + disabled: string; }; export type Palette = { @@ -131,18 +127,11 @@ export const palette: Palette = { fill: colors.basic[700], line: colors.basic[600], }, - - // opacity は全部 0.08 にする、 - // WIP: 適当な候補だけ書いた action: { - active: "rgba(0, 0, 0, 0.54)", - hover: "#F5F7F8", // basic[100] - selected: "rgba(0, 0, 0, 0.08)", - selectedOpacity: 0.08, - focus: "rgba(0, 0, 0, 0.12)", - focusOpacity: 0.08, - activeBackground: colors.basic[300], - hoverBackground: colors.basic[200], + active: colors.blue[50] as string, + hover: "", + selected: "", + disabled: colors.basic[200], }, };