diff --git a/packages/ui/.storybook/ColorSchemeSwitcher.tsx b/packages/ui/.storybook/ColorSchemeSwitcher.tsx index f4f965ad..71453846 100644 --- a/packages/ui/.storybook/ColorSchemeSwitcher.tsx +++ b/packages/ui/.storybook/ColorSchemeSwitcher.tsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { useColorScheme } from "../src/useColorScheme"; +import { useColorScheme } from "../src/color/useColorScheme"; export function ColorSchemeSwitcher({ mode, diff --git a/packages/ui/src/__snapshots__/createCssColorVariables.test.ts.snap b/packages/ui/src/__tests__/__snapshots__/createCssColorVariables.test.ts.snap similarity index 61% rename from packages/ui/src/__snapshots__/createCssColorVariables.test.ts.snap rename to packages/ui/src/__tests__/__snapshots__/createCssColorVariables.test.ts.snap index f02376cf..4d2265a9 100644 --- a/packages/ui/src/__snapshots__/createCssColorVariables.test.ts.snap +++ b/packages/ui/src/__tests__/__snapshots__/createCssColorVariables.test.ts.snap @@ -6,67 +6,36 @@ exports[`createCssColorVariables > should create css variables for dark mode 1`] "--sd-black-20": "rgba(0, 0, 0, 0.2)", "--sd-black-50": "rgba(0, 0, 0, 0.5)", "--sd-blue-10": "rgba(0, 112, 245, 0.1)", - "--sd-blue-100": "#A8D1FF", - "--sd-blue-200": "#66ADFF", "--sd-blue-30": "rgba(0, 112, 245, 0.3)", "--sd-blue-300": "#0070F5", - "--sd-blue-400": "#0063DB", "--sd-blue-50": "#0E2947", "--sd-blue-500": "#55ADFF", - "--sd-blue-75": "#CCE5FF", "--sd-dark-100": "#6E7A8A", - "--sd-dark-200": "#6A707C", "--sd-dark-30": "rgba(143, 148, 158, 0.3)", "--sd-dark-300": "#AEB4BD", - "--sd-dark-400": "#323C4E", - "--sd-dark-450": "#222F44", "--sd-dark-50": "rgba(25, 35, 52, 0.5)", "--sd-dark-500": "#FFFFFF", - "--sd-green-100": "#90EAAE", - "--sd-green-200": "#5DDA87", "--sd-green-30": "rgba(3, 135, 47, 0.3)", "--sd-green-300": "#03872F", - "--sd-green-400": "#1E8F46", "--sd-green-50": "#092E16", "--sd-green-500": "#5EE18A", - "--sd-green-75": "#C8F4D1", - "--sd-grey-100": "#8F949E", - "--sd-grey-200": "#6A707C", - "--sd-grey-300": "#5B6371", - "--sd-grey-400": "#323C4E", - "--sd-grey-450": "#222F44", - "--sd-grey-500": "#192334", - "--sd-purple-100": "#CBC8EE", - "--sd-purple-200": "#A7A1E8", "--sd-purple-300": "#6559CF", - "--sd-purple-400": "#473ABB", "--sd-purple-50": "#262247", "--sd-purple-500": "#BFA0FF", - "--sd-purple-75": "#DCDBF5", "--sd-red-10": "rgba(195, 25, 9, 0.1)", - "--sd-red-100": "#FDC2BA", - "--sd-red-200": "#FE988B", "--sd-red-30": "rgba(229, 35, 13, 0.3)", "--sd-red-300": "#E5230D", "--sd-red-300-aplha-20": "rgba(233, 27, 12, 0.3)", - "--sd-red-400": "#D9210D", "--sd-red-50": "#3D0A06", "--sd-red-500": "#FF6359", - "--sd-red-75": "#FDD9D3", - "--sd-silver-100": "#F6F7F8", "--sd-silver-200": "#0D1017", "--sd-silver-30": "rgba(225, 229, 234, 0.3)", - "--sd-silver-300": "#E8ECF0", "--sd-silver-400": "#30373D", "--sd-silver-400-alpha-30": "rgba(48, 55, 61, 0.3)", "--sd-silver-500": "#47505B", - "--sd-teal-100": "#91E3F8", - "--sd-teal-200": "#61D3EF", "--sd-teal-300": "#007EAB", - "--sd-teal-400": "#008DB8", "--sd-teal-50": "#11333D", "--sd-teal-500": "#31C7F5", - "--sd-teal-75": "#BEEDF9", "--sd-transparent": "rgba(0, 0, 0, 0)", "--sd-white": "#151B22", "--sd-white-08": "rgba(21, 27, 34, 0.08)", @@ -74,13 +43,9 @@ exports[`createCssColorVariables > should create css variables for dark mode 1`] "--sd-white-20": "rgba(21, 27, 34, 0.2)", "--sd-white-40": "rgba(21, 27, 34, 0.4)", "--sd-white-50": "rgba(21, 27, 34, 0.5)", - "--sd-yellow-100": "#FFE494", - "--sd-yellow-200": "#FFDC6B", "--sd-yellow-300": "#E8671C", - "--sd-yellow-400": "#FFA91F", "--sd-yellow-50": "#33200A", "--sd-yellow-500": "#FCA542", - "--sd-yellow-75": "#FFF1C2", } `; @@ -90,67 +55,36 @@ exports[`createCssColorVariables > should create css variables for light mode 1` "--sd-black-20": "rgba(0, 0, 0, 0.2)", "--sd-black-50": "rgba(0, 0, 0, 0.5)", "--sd-blue-10": "rgba(0, 112, 245, 0.1)", - "--sd-blue-100": "#A8D1FF", - "--sd-blue-200": "#66ADFF", "--sd-blue-30": "rgba(0, 112, 245, 0.3)", "--sd-blue-300": "#0070F5", - "--sd-blue-400": "#0063DB", "--sd-blue-50": "#EBF4FF", "--sd-blue-500": "#0063DB", - "--sd-blue-75": "#CCE5FF", "--sd-dark-100": "#8F949E", - "--sd-dark-200": "#6A707C", "--sd-dark-30": "rgba(143, 148, 158, 0.3)", "--sd-dark-300": "#5B6371", - "--sd-dark-400": "#323C4E", - "--sd-dark-450": "#222F44", "--sd-dark-50": "rgba(25, 35, 52, 0.5)", "--sd-dark-500": "#192334", - "--sd-green-100": "#90EAAE", - "--sd-green-200": "#5DDA87", "--sd-green-30": "rgba(3, 135, 47, 0.3)", "--sd-green-300": "#03872F", - "--sd-green-400": "#1E8F46", "--sd-green-50": "#ECF9EF", "--sd-green-500": "#007A29", - "--sd-green-75": "#C8F4D1", - "--sd-grey-100": "#8F949E", - "--sd-grey-200": "#6A707C", - "--sd-grey-300": "#5B6371", - "--sd-grey-400": "#323C4E", - "--sd-grey-450": "#222F44", - "--sd-grey-500": "#192334", - "--sd-purple-100": "#CBC8EE", - "--sd-purple-200": "#A7A1E8", "--sd-purple-300": "#6559CF", - "--sd-purple-400": "#473ABB", "--sd-purple-50": "#EFEEFC", "--sd-purple-500": "#473ABB", - "--sd-purple-75": "#DCDBF5", "--sd-red-10": "rgba(195, 25, 9, 0.1)", - "--sd-red-100": "#FDC2BA", - "--sd-red-200": "#FE988B", "--sd-red-30": "rgba(229, 35, 13, 0.3)", "--sd-red-300": "#E5230D", "--sd-red-300-aplha-20": "rgba(229, 35, 13, 0.2)", - "--sd-red-400": "#D9210D", "--sd-red-50": "#FFEDEB", "--sd-red-500": "#C31909", - "--sd-red-75": "#FDD9D3", - "--sd-silver-100": "#F6F7F8", "--sd-silver-200": "#F3F5F8", "--sd-silver-30": "rgba(225, 229, 234, 0.3)", - "--sd-silver-300": "#E8ECF0", "--sd-silver-400": "#E1E5EA", "--sd-silver-400-alpha-30": "rgba(225, 229, 234, 0.3)", "--sd-silver-500": "#C4CDD5", - "--sd-teal-100": "#91E3F8", - "--sd-teal-200": "#61D3EF", "--sd-teal-300": "#007EAB", - "--sd-teal-400": "#008DB8", "--sd-teal-50": "#E3F6FC", "--sd-teal-500": "#00678A", - "--sd-teal-75": "#BEEDF9", "--sd-transparent": "rgba(0, 0, 0, 0)", "--sd-white": "#fff", "--sd-white-08": "rgba(255, 255, 255, 0.08)", @@ -158,12 +92,8 @@ exports[`createCssColorVariables > should create css variables for light mode 1` "--sd-white-20": "rgba(255, 255, 255, 0.2)", "--sd-white-40": "rgba(255, 255, 255, 0.4)", "--sd-white-50": "rgba(255, 255, 255, 0.5)", - "--sd-yellow-100": "#FFE494", - "--sd-yellow-200": "#FFDC6B", "--sd-yellow-300": "#E8671C", - "--sd-yellow-400": "#FFA91F", "--sd-yellow-50": "#FFF7DC", "--sd-yellow-500": "#B84807", - "--sd-yellow-75": "#FFF1C2", } `; diff --git a/packages/ui/src/createCssColorVariables.test.ts b/packages/ui/src/__tests__/createCssColorVariables.test.ts similarity index 84% rename from packages/ui/src/createCssColorVariables.test.ts rename to packages/ui/src/__tests__/createCssColorVariables.test.ts index bf60df0a..bdc63f56 100644 --- a/packages/ui/src/createCssColorVariables.test.ts +++ b/packages/ui/src/__tests__/createCssColorVariables.test.ts @@ -1,5 +1,5 @@ import { describe, it, expect } from "vitest"; -import { createCssColorVariables } from "./createCssColorVariables"; +import { createCssColorVariables } from "../color/createCssColorVariables"; describe("createCssColorVariables", () => { it("should create css variables for light mode", () => { diff --git a/packages/ui/src/color.ts b/packages/ui/src/color.ts index 55601144..dcbe03c2 100644 --- a/packages/ui/src/color.ts +++ b/packages/ui/src/color.ts @@ -1,5 +1,3 @@ -// `Color`: Represents the primary color palette with various shades and opacities. -// - Includes legacy colors marked as deprecated. // - To update a color, modify the hex or rgba value associated with the desired color name. export const Color = { @@ -26,94 +24,6 @@ export const Color = { Blue10: "rgba(0, 112, 245, 0.1)", Red10: "rgba(195, 25, 9, 0.1)", - // - // Legacy Neutral Colors - // - - /**@deprecated Use Dark100 */ - Grey100: "#8F949E", - /**@deprecated Use Dark200 */ - Grey200: "#6A707C", - /**@deprecated Use Dark300 */ - Grey300: "#5B6371", - /**@deprecated Use Dark400 */ - Grey400: "#323C4E", - /**@deprecated Use Dark450 */ - Grey450: "#222F44", - /**@deprecated Use Dark500 */ - Grey500: "#192334", - - /** @deprecated */ - Dark200: "#6A707C", - /** @deprecated */ - Dark400: "#323C4E", - /** @deprecated */ - Dark450: "#222F44", - - /** @deprecated */ - Silver100: "#F6F7F8", - /** @deprecated */ - Silver300: "#E8ECF0", - - // - // Legacy Extended Palette - // - - /** @deprecated */ - Blue75: "#CCE5FF", - /** @deprecated */ - Blue100: "#A8D1FF", - /** @deprecated */ - Blue200: "#66ADFF", - /** @deprecated */ - Blue400: "#0063DB", - - /** @deprecated */ - Green75: "#C8F4D1", - /** @deprecated */ - Green100: "#90EAAE", - /** @deprecated */ - Green200: "#5DDA87", - /** @deprecated */ - Green400: "#1E8F46", - - /** @deprecated */ - Purple75: "#DCDBF5", - /** @deprecated */ - Purple100: "#CBC8EE", - /** @deprecated */ - Purple200: "#A7A1E8", - /** @deprecated */ - Purple400: "#473ABB", - - /** @deprecated */ - Red75: "#FDD9D3", - - /** @deprecated */ - Red100: "#FDC2BA", - /** @deprecated */ - Red200: "#FE988B", - /** @deprecated */ - Red400: "#D9210D", - - /** @deprecated */ - Teal75: "#BEEDF9", - /** @deprecated */ - Teal100: "#91E3F8", - /** @deprecated */ - Teal200: "#61D3EF", - /** @deprecated */ - Teal400: "#008DB8", - - /** @deprecated */ - Yellow75: "#FFF1C2", - /** @deprecated */ - Yellow100: "#FFE494", - /** @deprecated */ - Yellow200: "#FFDC6B", - /** @deprecated */ - Yellow400: "#FFA91F", - // // Neutral Colors // @@ -186,93 +96,6 @@ export const ColorDark = { Blue10: "rgba(0, 112, 245, 0.1)", Red10: "rgba(195, 25, 9, 0.1)", - // - // Legacy Neutral Colors - // - - /**@deprecated Use Dark100 */ - Grey100: "#8F949E", - /**@deprecated Use Dark200 */ - Grey200: "#6A707C", - /**@deprecated Use Dark300 */ - Grey300: "#5B6371", - /**@deprecated Use Dark400 */ - Grey400: "#323C4E", - /**@deprecated Use Dark450 */ - Grey450: "#222F44", - /**@deprecated Use Dark500 */ - Grey500: "#192334", - - /** @deprecated */ - Dark200: "#6A707C", - /** @deprecated */ - Dark400: "#323C4E", - /** @deprecated */ - Dark450: "#222F44", - - /** @deprecated */ - Silver100: "#F6F7F8", - /** @deprecated */ - Silver300: "#E8ECF0", - - // - // Legacy Extended Palette - // - - /** @deprecated */ - Blue75: "#CCE5FF", - /** @deprecated */ - Blue100: "#A8D1FF", - /** @deprecated */ - Blue200: "#66ADFF", - /** @deprecated */ - Blue400: "#0063DB", - - /** @deprecated */ - Green75: "#C8F4D1", - /** @deprecated */ - Green100: "#90EAAE", - /** @deprecated */ - Green200: "#5DDA87", - /** @deprecated */ - Green400: "#1E8F46", - - /** @deprecated */ - Purple75: "#DCDBF5", - /** @deprecated */ - Purple100: "#CBC8EE", - /** @deprecated */ - Purple200: "#A7A1E8", - /** @deprecated */ - Purple400: "#473ABB", - - /** @deprecated */ - Red75: "#FDD9D3", - /** @deprecated */ - Red100: "#FDC2BA", - /** @deprecated */ - Red200: "#FE988B", - /** @deprecated */ - Red400: "#D9210D", - - /** @deprecated */ - Teal75: "#BEEDF9", - /** @deprecated */ - Teal100: "#91E3F8", - /** @deprecated */ - Teal200: "#61D3EF", - /** @deprecated */ - Teal400: "#008DB8", - - /** @deprecated */ - Yellow75: "#FFF1C2", - /** @deprecated */ - Yellow100: "#FFE494", - /** @deprecated */ - Yellow200: "#FFDC6B", - /** @deprecated */ - Yellow400: "#FFA91F", - // // Neutral Colors // @@ -317,7 +140,6 @@ export const ColorDark = { Yellow500: "#FCA542", } as const; -// `ColorDynamic`: Represents a newer version of the color palette using CSS variables. // - Designed for more dynamic theming using CSS custom properties. // - Update colors by changing the CSS variable references. @@ -345,87 +167,6 @@ export const ColorDynamic = { Blue10: "var(--sd-blue-10)", Red10: "var(--sd-red-10)", - // Legacy Neutral Colors - /**@deprecated Use Dark100 */ - Grey100: "var(--sd-grey-100)", - /**@deprecated Use Dark200 */ - Grey200: "var(--sd-grey-200)", - /**@deprecated Use Dark300 */ - Grey300: "var(--sd-grey-300)", - /**@deprecated Use Dark400 */ - Grey400: "var(--sd-grey-400)", - /**@deprecated Use Dark450 */ - Grey450: "var(--sd-grey-450)", - /**@deprecated Use Dark500 */ - Grey500: "var(--sd-grey-500)", - - /** @deprecated */ - Dark200: "var(--sd-dark-200)", - /** @deprecated */ - Dark400: "var(--sd-dark-400)", - /** @deprecated */ - Dark450: "var(--sd-dark-450)", - - /** @deprecated */ - Silver100: "var(--sd-silver-100)", - /** @deprecated */ - Silver300: "var(--sd-silver-300)", - - // Legacy Extended Palette - /** @deprecated */ - Blue75: "var(--sd-blue-75)", - /** @deprecated */ - Blue100: "var(--sd-blue-100)", - /** @deprecated */ - Blue200: "var(--sd-blue-200)", - /** @deprecated */ - Blue400: "var(--sd-blue-400)", - - /** @deprecated */ - Green75: "var(--sd-green-75)", - /** @deprecated */ - Green100: "var(--sd-green-100)", - /** @deprecated */ - Green200: "var(--sd-green-200)", - /** @deprecated */ - Green400: "var(--sd-green-400)", - - /** @deprecated */ - Purple75: "var(--sd-purple-75)", - /** @deprecated */ - Purple100: "var(--sd-purple-100)", - /** @deprecated */ - Purple200: "var(--sd-purple-200)", - /** @deprecated */ - Purple400: "var(--sd-purple-400)", - - /** @deprecated */ - Red75: "var(--sd-red-75)", - /** @deprecated */ - Red100: "var(--sd-red-100)", - /** @deprecated */ - Red200: "var(--sd-red-200)", - /** @deprecated */ - Red400: "var(--sd-red-400)", - - /** @deprecated */ - Teal75: "var(--sd-teal-75)", - /** @deprecated */ - Teal100: "var(--sd-teal-100)", - /** @deprecated */ - Teal200: "var(--sd-teal-200)", - /** @deprecated */ - Teal400: "var(--sd-teal-400)", - - /** @deprecated */ - Yellow75: "var(--sd-yellow-75)", - /** @deprecated */ - Yellow100: "var(--sd-yellow-100)", - /** @deprecated */ - Yellow200: "var(--sd-yellow-200)", - /** @deprecated */ - Yellow400: "var(--sd-yellow-400)", - // // Neutral Colors // diff --git a/packages/ui/src/createCssColorVariables.ts b/packages/ui/src/color/createCssColorVariables.ts similarity index 53% rename from packages/ui/src/createCssColorVariables.ts rename to packages/ui/src/color/createCssColorVariables.ts index b305e572..d8769a31 100644 --- a/packages/ui/src/createCssColorVariables.ts +++ b/packages/ui/src/color/createCssColorVariables.ts @@ -1,4 +1,4 @@ -import { Color, ColorDark } from "./color"; +import { Color, ColorDark } from "../color"; const CSS_VAR_PREFIX = "sd"; @@ -9,8 +9,11 @@ function colorKeyToCssVarName(key: string) { export function createCssColorVariables(colorScheme: "light" | "dark") { const color = colorScheme === "light" ? Color : ColorDark; - return Object.entries(color).reduce((acc, [key, value]) => { - acc[`--${CSS_VAR_PREFIX}-${colorKeyToCssVarName(key)}`] = value; - return acc; - }, {} as Record); + return Object.entries(color).reduce( + (acc, [key, value]) => { + acc[`--${CSS_VAR_PREFIX}-${colorKeyToCssVarName(key)}`] = value; + return acc; + }, + {} as Record, + ); } diff --git a/packages/ui/src/useColorScheme.ts b/packages/ui/src/color/useColorScheme.ts similarity index 100% rename from packages/ui/src/useColorScheme.ts rename to packages/ui/src/color/useColorScheme.ts diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index a6e43412..14b47622 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,4 +1,4 @@ export * from "./Button"; export { ThemeProvider } from "./theme"; export { Color, ColorDark, ColorDynamic } from "./color"; -export { useColorScheme } from "./useColorScheme"; +export { useColorScheme } from "./color/useColorScheme"; diff --git a/packages/ui/src/theme.tsx b/packages/ui/src/theme.tsx index 9c432276..4059d959 100644 --- a/packages/ui/src/theme.tsx +++ b/packages/ui/src/theme.tsx @@ -1,8 +1,8 @@ import { CssBaseline, GlobalStyles } from "@mui/material"; import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles"; import type { ReactNode } from "react"; -import { createCssColorVariables } from "./createCssColorVariables"; import { createTheme } from "./createTheme"; +import { createCssColorVariables } from "./color/createCssColorVariables"; export function ThemeProvider({ children }: { children: ReactNode }) { const theme = createTheme();