WIP: Palette 再考

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",

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;

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";

src/styles/shadows.ts

@@ -0,0 +1,4 @@
+// shadows は正直 ms 側で参照しないからこっちで列挙しておけばなんとかなりそうな感じはする
+// 実装する側は指定したいやつをこの中から探してくれ、それがない場合は自分で定義してくれって感じ
+// ただ、色については palette のやつを使いたい感じがするので、もしかしたら引数取るかも
+export const Shadows = ["none"];

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,13 +8,15 @@ export type ThemeOptions = {
   palette?: DeepPartial<Palette>;
   spacing?: number;
   radius?: number;
+  shadows?: string[];
   depth?: DepthOptions;
 };
 
 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;
 }

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>): Palette {