From ed5242dd5ef49872f3d3e2fc488153404defc4b4 Mon Sep 17 00:00:00 2001 From: storywithoutend Date: Sat, 21 Oct 2023 19:17:12 +0800 Subject: [PATCH] add logo and color pages + updated colors --- .../atoms/Button/utils/getValidatedColor.ts | 6 +- .../atoms/Button/utils/withColorStyle.ts | 14 +- .../atoms/Spinner/utils/withColor.ts | 14 +- .../atoms/Tag/utils/withColorStyle.ts | 12 +- .../Checkbox/utils/getValueForColorStyle.ts | 12 +- .../utils/getValueForColorStyle.ts | 12 +- .../utils/getValidatedColor.ts | 6 +- .../CurrencyToggle/utils/getValidatedColor.ts | 6 +- .../RadioButton/utils/getValidatedColor.ts | 6 +- .../ThemeToggle/utils/getValidatedColor.ts | 6 +- .../Toggle/utils/getValidatedColor.ts | 6 +- .../components/organisms/Dialog/Dialog.tsx | 18 +- components/src/index.ts | 14 + components/src/interfaces/withColor.ts | 14 +- components/src/interfaces/withColourStyle.ts | 28 +- components/src/tokens/color3.ts | 582 ++++++++++++------ docs/package.json | 3 +- docs/public/downloads/ENSLogo.svg | 33 + docs/public/downloads/ENSLogoBlack.svg | 13 + docs/public/downloads/ENSLogoWhite.svg | 13 + docs/public/downloads/ENSMark.svg | 15 + docs/public/downloads/ENSMarkBlack.svg | 10 + docs/public/downloads/ENSMarkWhite.svg | 10 + .../AdditionalColors/AdditionalColors.tsx | 93 +++ .../components/PaletteRow.tsx | 85 +++ docs/src/components/Logos/Logos.tsx | 63 ++ docs/src/components/MDX.tsx | 6 + docs/src/components/Palette/Palette.tsx | 110 ++++ docs/src/components/Palette/styles.css.ts | 16 + .../components/PaletteModal/PaletteModal.tsx | 139 +++++ docs/src/components/SideBar.tsx | 2 +- docs/src/guides/colors.mdx | 15 + docs/src/guides/logo.mdx | 16 + docs/tsconfig.json | 3 +- pnpm-lock.yaml | 2 + 35 files changed, 1125 insertions(+), 278 deletions(-) create mode 100644 docs/public/downloads/ENSLogo.svg create mode 100644 docs/public/downloads/ENSLogoBlack.svg create mode 100644 docs/public/downloads/ENSLogoWhite.svg create mode 100644 docs/public/downloads/ENSMark.svg create mode 100644 docs/public/downloads/ENSMarkBlack.svg create mode 100644 docs/public/downloads/ENSMarkWhite.svg create mode 100644 docs/src/components/AdditionalColors/AdditionalColors.tsx create mode 100644 docs/src/components/AdditionalColors/components/PaletteRow.tsx create mode 100644 docs/src/components/Logos/Logos.tsx create mode 100644 docs/src/components/Palette/Palette.tsx create mode 100644 docs/src/components/Palette/styles.css.ts create mode 100644 docs/src/components/PaletteModal/PaletteModal.tsx create mode 100644 docs/src/guides/colors.mdx create mode 100644 docs/src/guides/logo.mdx diff --git a/components/src/components/atoms/Button/utils/getValidatedColor.ts b/components/src/components/atoms/Button/utils/getValidatedColor.ts index 14f209a4..5619901e 100644 --- a/components/src/components/atoms/Button/utils/getValidatedColor.ts +++ b/components/src/components/atoms/Button/utils/getValidatedColor.ts @@ -1,6 +1,6 @@ -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' -export type Color = BaseColour +export type Color = PrimaryColor export type WithColor = { color: Color } @@ -11,6 +11,6 @@ export const getValidatedColor = ( if (!color) return fallback const matches = color.match('^(.*?)(Primary|Secondary)?$') const baseColor = matches?.[1] || 'accent' - const validatedColor = validateBaseColour(baseColor, 'accent') + const validatedColor = validatePrimaryColor(baseColor, 'accent') return `$${validatedColor}Primary` } diff --git a/components/src/components/atoms/Button/utils/withColorStyle.ts b/components/src/components/atoms/Button/utils/withColorStyle.ts index fcad1f36..0b6cd229 100644 --- a/components/src/components/atoms/Button/utils/withColorStyle.ts +++ b/components/src/components/atoms/Button/utils/withColorStyle.ts @@ -1,12 +1,12 @@ import { P, match } from 'ts-pattern' -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' type Shade = 'Primary' | 'Secondary' export type ColorStyle = - | BaseColour - | `${BaseColour}${Shade}` + | PrimaryColor + | `${PrimaryColor}${Shade}` | 'background' | 'disabled' | 'transparent' @@ -22,14 +22,14 @@ type Properties = { type Property = keyof Properties -const getPrimaryColor = (color: BaseColour, property: Property): string => +const getPrimaryColor = (color: PrimaryColor, property: Property): string => match(property) .with(P.union('background', 'border'), () => `$${color}Primary`) .with('content', () => '$textAccent') .with('hover', () => `$${color}Bright`) .exhaustive() -const getSecondaryColor = (color: BaseColour, property: Property): string => +const getSecondaryColor = (color: PrimaryColor, property: Property): string => match(property) .with(P.union('background', 'border'), () => `$${color}Surface`) .with('content', () => `$${color}Dim`) @@ -69,12 +69,12 @@ export const getValueForColourStyle = ( const style = matches?.[2] return match([color, style]) .with([P._, 'Secondary'], ([color]) => - getSecondaryColor(validateBaseColour(color), property), + getSecondaryColor(validatePrimaryColor(color), property), ) .with(['background', P._], () => getBackgroundColor(property)) .with(['disabled', P._], () => getDisabledColor(property)) .with(['transparent', P._], () => getTransparentColor(property)) .otherwise(([color]) => - getPrimaryColor(validateBaseColour(color), property), + getPrimaryColor(validatePrimaryColor(color), property), ) } diff --git a/components/src/components/atoms/Spinner/utils/withColor.ts b/components/src/components/atoms/Spinner/utils/withColor.ts index 13721316..bbe41b9f 100644 --- a/components/src/components/atoms/Spinner/utils/withColor.ts +++ b/components/src/components/atoms/Spinner/utils/withColor.ts @@ -1,17 +1,17 @@ import { ADDITIONAL_COLORS, - AdditionalColour, - BASE_COLOURS, - BaseColour, - SHADED_COLORS, - ShadedColor, + AdditionalColor, + PALETTE_COLORS, + PRIMARY_COLORS, + PaletteColor, + PrimaryColor, } from '@/src/tokens/color3' -export type Color = BaseColour | ShadedColor | AdditionalColour +export type Color = PrimaryColor | PaletteColor | AdditionalColor export type WithColor = { color: Color } -const COLORS = [...BASE_COLOURS, ...SHADED_COLORS, ...ADDITIONAL_COLORS] +const COLORS = [...PRIMARY_COLORS, ...PALETTE_COLORS, ...ADDITIONAL_COLORS] export const validateColor = (color: unknown, fallback = 'unset') => { if (!color) return fallback diff --git a/components/src/components/atoms/Tag/utils/withColorStyle.ts b/components/src/components/atoms/Tag/utils/withColorStyle.ts index 26094fb3..aa9291ef 100644 --- a/components/src/components/atoms/Tag/utils/withColorStyle.ts +++ b/components/src/components/atoms/Tag/utils/withColorStyle.ts @@ -1,10 +1,10 @@ import { P, match } from 'ts-pattern' -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' type Shade = 'Primary' | 'Secondary' -type ColorStyle = BaseColour | `${BaseColour}${Shade}` +type ColorStyle = PrimaryColor | `${PrimaryColor}${Shade}` export type WithColorStyle = { colorStyle?: ColorStyle } @@ -16,14 +16,14 @@ type Properties = { type Property = keyof Properties -const getPrimaryColor = (color: BaseColour, property: Property): string => +const getPrimaryColor = (color: PrimaryColor, property: Property): string => match(property) .with('background', () => `$${color}Primary`) .with('content', () => '$textAccent') .with('hover', () => `$${color}Bright`) .exhaustive() -const getSecondaryColor = (color: BaseColour, property: Property): string => +const getSecondaryColor = (color: PrimaryColor, property: Property): string => match(property) .with('background', () => `$${color}Surface`) .with('content', () => `$${color}Primary`) @@ -39,9 +39,9 @@ export const getValueForColorStyle = ( const style = matches?.[2] return match([color, style]) .with([P._, 'Secondary'], ([color]) => - getSecondaryColor(validateBaseColour(color), property), + getSecondaryColor(validatePrimaryColor(color), property), ) .otherwise(([color]) => - getPrimaryColor(validateBaseColour(color), property), + getPrimaryColor(validatePrimaryColor(color), property), ) } diff --git a/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts b/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts index 7cdb4582..dfa45a54 100644 --- a/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts +++ b/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts @@ -1,10 +1,10 @@ import { P, match } from 'ts-pattern' -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' type Shade = 'Primary' | 'Secondary' -type ColorStyle = BaseColour | `${BaseColour}${Shade}` +type ColorStyle = PrimaryColor | `${PrimaryColor}${Shade}` export type WithColorStyle = { colorStyle?: ColorStyle } @@ -15,13 +15,13 @@ type Properties = { type Property = keyof Properties -const getPrimaryColor = (color: BaseColour, property: Property): string => +const getPrimaryColor = (color: PrimaryColor, property: Property): string => match(property) .with('background', () => `$${color}Primary`) .with('content', () => '$textAccent') .exhaustive() -const getSecondaryColor = (color: BaseColour, property: Property): string => +const getSecondaryColor = (color: PrimaryColor, property: Property): string => match(property) .with(P.union('background'), () => `$${color}Surface`) .with('content', () => `$${color}Primary`) @@ -36,9 +36,9 @@ export const getValueForColorStyle = ( const style = matches?.[2] return match([color, style]) .with([P._, 'Secondary'], ([color]) => - getSecondaryColor(validateBaseColour(color), property), + getSecondaryColor(validatePrimaryColor(color), property), ) .otherwise(([color]) => - getPrimaryColor(validateBaseColour(color), property), + getPrimaryColor(validatePrimaryColor(color), property), ) } diff --git a/components/src/components/molecules/CheckboxRow/utils/getValueForColorStyle.ts b/components/src/components/molecules/CheckboxRow/utils/getValueForColorStyle.ts index 428747b4..5249a9bf 100644 --- a/components/src/components/molecules/CheckboxRow/utils/getValueForColorStyle.ts +++ b/components/src/components/molecules/CheckboxRow/utils/getValueForColorStyle.ts @@ -1,10 +1,10 @@ import { P, match } from 'ts-pattern' -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' type Shade = 'Primary' | 'Secondary' -export type ColorStyle = BaseColour | `${BaseColour}${Shade}` +export type ColorStyle = PrimaryColor | `${PrimaryColor}${Shade}` export type WithColorStyle = { colorStyle: ColorStyle } @@ -17,7 +17,7 @@ type Properties = { type Property = keyof Properties -const getPrimaryColor = (color: BaseColour, property: Property): string => +const getPrimaryColor = (color: PrimaryColor, property: Property): string => match(property) .with('background', () => `$${color}Surface`) .with('svg', () => '$textAccent') @@ -25,7 +25,7 @@ const getPrimaryColor = (color: BaseColour, property: Property): string => .with('iconHover', () => `$${color}Bright`) .exhaustive() -const getSecondaryColor = (color: BaseColour, property: Property): string => +const getSecondaryColor = (color: PrimaryColor, property: Property): string => match(property) .with('background', () => `$${color}Surface`) .with('svg', () => `$${color}Dim`) @@ -42,9 +42,9 @@ export const getValueForColorStyle = ( const style = matches?.[2] return match([color, style]) .with([P._, 'Secondary'], ([color]) => - getSecondaryColor(validateBaseColour(color), property), + getSecondaryColor(validatePrimaryColor(color), property), ) .otherwise(([color]) => - getPrimaryColor(validateBaseColour(color), property), + getPrimaryColor(validatePrimaryColor(color), property), ) } diff --git a/components/src/components/molecules/CountdownCircle/utils/getValidatedColor.ts b/components/src/components/molecules/CountdownCircle/utils/getValidatedColor.ts index fcfc4653..159e2c80 100644 --- a/components/src/components/molecules/CountdownCircle/utils/getValidatedColor.ts +++ b/components/src/components/molecules/CountdownCircle/utils/getValidatedColor.ts @@ -1,12 +1,12 @@ -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' -export type Color = BaseColour +export type Color = PrimaryColor export type WithColor = { color: Color } export const getValidatedColor = (color: Color): string => { const matches = color.match('^(.*?)(Primary|Secondary)?$') const baseColor = matches?.[1] || 'accent' - const validatedColor = validateBaseColour(baseColor, 'accent') + const validatedColor = validatePrimaryColor(baseColor, 'accent') return `$${validatedColor}Primary` } diff --git a/components/src/components/molecules/CurrencyToggle/utils/getValidatedColor.ts b/components/src/components/molecules/CurrencyToggle/utils/getValidatedColor.ts index 9e7b938f..4c0fad0c 100644 --- a/components/src/components/molecules/CurrencyToggle/utils/getValidatedColor.ts +++ b/components/src/components/molecules/CurrencyToggle/utils/getValidatedColor.ts @@ -1,12 +1,12 @@ -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' -export type Color = BaseColour +export type Color = PrimaryColor export type WithColor = { color: Color } export const getValidatedColor = (color: Color = 'accent'): string => { const matches = color.match('^(.*?)(Primary|Secondary)?$') const baseColor = matches?.[1] || 'accent' - const validatedColor = validateBaseColour(baseColor, 'accent') + const validatedColor = validatePrimaryColor(baseColor, 'accent') return `$${validatedColor}Primary` } diff --git a/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts b/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts index 9e7b938f..4c0fad0c 100644 --- a/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts +++ b/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts @@ -1,12 +1,12 @@ -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' -export type Color = BaseColour +export type Color = PrimaryColor export type WithColor = { color: Color } export const getValidatedColor = (color: Color = 'accent'): string => { const matches = color.match('^(.*?)(Primary|Secondary)?$') const baseColor = matches?.[1] || 'accent' - const validatedColor = validateBaseColour(baseColor, 'accent') + const validatedColor = validatePrimaryColor(baseColor, 'accent') return `$${validatedColor}Primary` } diff --git a/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts b/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts index 9e7b938f..4c0fad0c 100644 --- a/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts +++ b/components/src/components/molecules/ThemeToggle/utils/getValidatedColor.ts @@ -1,12 +1,12 @@ -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' -export type Color = BaseColour +export type Color = PrimaryColor export type WithColor = { color: Color } export const getValidatedColor = (color: Color = 'accent'): string => { const matches = color.match('^(.*?)(Primary|Secondary)?$') const baseColor = matches?.[1] || 'accent' - const validatedColor = validateBaseColour(baseColor, 'accent') + const validatedColor = validatePrimaryColor(baseColor, 'accent') return `$${validatedColor}Primary` } diff --git a/components/src/components/molecules/Toggle/utils/getValidatedColor.ts b/components/src/components/molecules/Toggle/utils/getValidatedColor.ts index 9e7b938f..4c0fad0c 100644 --- a/components/src/components/molecules/Toggle/utils/getValidatedColor.ts +++ b/components/src/components/molecules/Toggle/utils/getValidatedColor.ts @@ -1,12 +1,12 @@ -import { BaseColour, validateBaseColour } from '@/src/tokens/color3' +import { PrimaryColor, validatePrimaryColor } from '@/src/tokens/color3' -export type Color = BaseColour +export type Color = PrimaryColor export type WithColor = { color: Color } export const getValidatedColor = (color: Color = 'accent'): string => { const matches = color.match('^(.*?)(Primary|Secondary)?$') const baseColor = matches?.[1] || 'accent' - const validatedColor = validateBaseColour(baseColor, 'accent') + const validatedColor = validatePrimaryColor(baseColor, 'accent') return `$${validatedColor}Primary` } diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx index 2b0d75a1..204a186f 100644 --- a/components/src/components/organisms/Dialog/Dialog.tsx +++ b/components/src/components/organisms/Dialog/Dialog.tsx @@ -6,7 +6,7 @@ import { WithAlert } from '@/src/types' import { translateY } from '@/src/css/utils/common' -import { Modal, Typography } from '../..' +import { Modal, ScrollBox, Typography } from '../..' import { Box, BoxProps } from '../../atoms/Box/Box' import { getValueForAlert } from './utils/getValueForAlert' import { getValueForStepType } from './utils/getValueForStepType' @@ -210,6 +210,20 @@ const Heading = ({ ) } +const Content = ({ children }: React.PropsWithChildren) => { + return ( + + + {children} + + + ) +} + const Footer = ({ leading, trailing, @@ -362,4 +376,6 @@ export const Dialog = ({ Dialog.displayName = 'Dialog' Dialog.Footer = Footer Dialog.Heading = Heading +Dialog.Content = Content + Dialog.CloseButton = CloseButton diff --git a/components/src/index.ts b/components/src/index.ts index 55318150..048aefc8 100644 --- a/components/src/index.ts +++ b/components/src/index.ts @@ -4,3 +4,17 @@ export * as Components from './components' export { tokens, baseTheme, lightTheme, darkTheme } from './tokens' export type { DefaultTheme, EmptyObject, Accent, Mode } from './types' export type { Hue, Colors, Space } from './tokens' +export { + RAW_PALETTE_COLORS, + RAW_ADDITIONAL_COLORS, + rawColorToHSL, + rawColorToRGB, + rawColorToRGBA, + rawColorToHex, +} from './tokens/color3' +export type { + RawPalettes, + Palette, + RawAdditionalColors, + RawColor, +} from './tokens/color3' diff --git a/components/src/interfaces/withColor.ts b/components/src/interfaces/withColor.ts index 47710028..c5603da2 100644 --- a/components/src/interfaces/withColor.ts +++ b/components/src/interfaces/withColor.ts @@ -1,17 +1,17 @@ import { ADDITIONAL_COLORS, - AdditionalColour, - BASE_COLOURS, - BaseColour, - SHADED_COLORS, - ShadedColor, + AdditionalColor, + PALETTE_COLORS, + PRIMARY_COLORS, + PaletteColor, + PrimaryColor, } from '@/src/tokens/color3' -export type Color = BaseColour | ShadedColor | AdditionalColour +export type Color = PrimaryColor | PaletteColor | AdditionalColor export type WithColor = { color?: Color } -const COLORS = [...BASE_COLOURS, ...SHADED_COLORS, ...ADDITIONAL_COLORS] +const COLORS = [...PRIMARY_COLORS, ...PALETTE_COLORS, ...ADDITIONAL_COLORS] export const validateColor = (color: unknown, fallback = 'unset') => { if (!color) return fallback diff --git a/components/src/interfaces/withColourStyle.ts b/components/src/interfaces/withColourStyle.ts index 08ce0cb7..62f04340 100644 --- a/components/src/interfaces/withColourStyle.ts +++ b/components/src/interfaces/withColourStyle.ts @@ -1,41 +1,41 @@ import { P, match } from 'ts-pattern' -import { BaseColour, Colour, validateBaseColour } from '../tokens/color3' +import { Color, PrimaryColor, validatePrimaryColor } from '../tokens/color3' type Shade = 'Primary' | 'Secondary' type ColourStyle = - | BaseColour - | `${BaseColour}${Shade}` + | PrimaryColor + | `${PrimaryColor}${Shade}` | 'background' | 'disabled' export type WithColourStyle = { colourStyle: ColourStyle } type Properties = { - background: Colour - content: Colour - hover: Colour - border: Colour + background: Color + content: Color + hover: Color + border: Color } type Property = keyof Properties -const getPrimaryColor = (colour: BaseColour, property: Property): Colour => +const getPrimaryColor = (colour: PrimaryColor, property: Property): Color => match(property) .with(P.union('background', 'border'), () => `${colour}Primary` as const) .with('content', () => 'textAccent' as const) .with('hover', () => `${colour}Bright` as const) .exhaustive() -const getSecondaryColor = (colour: BaseColour, property: Property): Colour => +const getSecondaryColor = (colour: PrimaryColor, property: Property): Color => match(property) .with(P.union('background', 'border'), () => `${colour}Surface` as const) .with('content', () => `${colour}Dim` as const) .with('hover', () => `${colour}Light` as const) .exhaustive() -const getBackgroundColor = (property: Property): Colour => +const getBackgroundColor = (property: Property): Color => match(property) .with('background', () => 'backgroundPrimary' as const) .with('content', () => 'textSecondary' as const) @@ -43,7 +43,7 @@ const getBackgroundColor = (property: Property): Colour => .with('hover', () => 'greySurface' as const) .exhaustive() -const getDisabledColor = (property: Property): Colour => +const getDisabledColor = (property: Property): Color => match(property) .with('background', () => 'greyLight' as const) .with('content', () => 'textDisabled' as const) @@ -54,17 +54,17 @@ const getDisabledColor = (property: Property): Colour => export const getValueForColourStyle = ( colourStyle: ColourStyle, property: Property, -): Colour => { +): Color => { const matches = colourStyle.match('^(.*)(Primary|Secondary)$') const colour = matches?.[1] || 'accent' const style = matches?.[2] return match([colour, style]) .with([P._, 'Secondary'], ([colour]) => - getSecondaryColor(validateBaseColour(colour), property), + getSecondaryColor(validatePrimaryColor(colour), property), ) .with(['background', P._], () => getBackgroundColor(property)) .with(['disabled', P._], () => getDisabledColor(property)) .otherwise(([colour]) => - getPrimaryColor(validateBaseColour(colour), property), + getPrimaryColor(validatePrimaryColor(colour), property), ) } diff --git a/components/src/tokens/color3.ts b/components/src/tokens/color3.ts index 74199c74..078360a4 100644 --- a/components/src/tokens/color3.ts +++ b/components/src/tokens/color3.ts @@ -1,209 +1,343 @@ -const BASE_COLOUR_MAP = { - accent: 'rgb(56,137,255)', - blue: 'rgb(56,137,255)', - green: 'rgb(25,156,117)', - yellow: 'rgb(233,185,17)', - red: 'rgb(198,48,27)', - orange: 'rgb(243,147,11)', - indigo: 'rgb(107,103,233)', - pink: 'rgb(213,46,126)', - purple: 'rgb(163,67,211)', - grey: 'rgb(155,155,167)', -} as const +/** PRIMARY COLORS */ + +export type Mode = 'light' | 'dark' + +export type PrimaryColor = + | 'accent' + | 'blue' + | 'green' + | 'yellow' + | 'red' + | 'orange' + | 'indigo' + | 'pink' + | 'purple' + | 'grey' -export type BaseColour = keyof typeof BASE_COLOUR_MAP +export type RawColor = Readonly<[number, number, number]> + +const RAW_PRIMARY_COLORS: { [key in PrimaryColor]: RawColor } = { + accent: [56, 137, 255], + blue: [56, 137, 255], + green: [25, 156, 117], + yellow: [233, 185, 17], + red: [198, 48, 27], + orange: [243, 147, 11], + indigo: [88, 84, 214], + pink: [213, 46, 126], + purple: [163, 67, 211], + grey: [155, 155, 167], +} as const -export const BASE_COLOURS = Object.keys(BASE_COLOUR_MAP) as BaseColour[] +export const PRIMARY_COLORS = Object.keys(RAW_PRIMARY_COLORS) as PrimaryColor[] -export const validateBaseColour = ( +export const validatePrimaryColor = ( colour: unknown, - fallback: BaseColour = 'accent', -): BaseColour => { - return BASE_COLOURS.includes(colour as BaseColour) - ? (colour as BaseColour) + fallback: PrimaryColor = 'accent', +): PrimaryColor => { + return PRIMARY_COLORS.includes(colour as PrimaryColor) + ? (colour as PrimaryColor) : fallback } -const shades = [ - 'active', - 'dim', - 'primary', - 'bright', - 'light', - 'surface', -] as const - -export type Shade = typeof shades[number] - -export type ShadedColor = `${BaseColour}${Capitalize}` - -const lightShadedColors: { [key in ShadedColor]: string } = { - accentActive: 'rgb(0,54,133)', - accentDim: 'rgb(5,106,255)', - accentPrimary: BASE_COLOUR_MAP.blue, - accentBright: 'rgb(86,154,255)', - accentLight: 'rgb(209,228,255)', - accentSurface: 'rgb(238,245,255)', - blueActive: 'rgb(0,54,133)', - blueDim: 'rgb(5,106,255)', - bluePrimary: BASE_COLOUR_MAP.blue, - blueBright: 'rgb(86,154,255)', - blueLight: 'rgb(209,228,255)', - blueSurface: 'rgb(238,245,255)', - greenActive: 'rgb(7,44,33)', - greenDim: 'rgb(21,132,99)', - greenPrimary: BASE_COLOUR_MAP.green, - greenBright: 'rgb(30,183,137)', - greenLight: 'rgb(203,231,220)', - greenSurface: 'rgb(231,244,239)', - yellowActive: 'rgb(66,53,5)', - yellowDim: 'rgb(185,147,14)', - yellowPrimary: BASE_COLOUR_MAP.yellow, - yellowBright: 'rgb(240,201,60)', - yellowLight: 'rgb(255,239,173)', - yellowSurface: 'rgb(255,245,205)', - redActive: 'rgb(40,10,6)', - redDim: 'rgb(153,37,21)', - redPrimary: BASE_COLOUR_MAP.red, - redBright: 'rgb(227,70,49)', - redLight: 'rgb(240,194,194)', - redSurface: 'rgb(249,231,231)', - orangeActive: 'rgb(73,44,3)', - orangeDim: 'rgb(195,118,9)', - orangePrimary: BASE_COLOUR_MAP.orange, - orangeBright: 'rgb(246,169,60)', - orangeLight: 'rgb(251,225,188)', - orangeSurface: 'rgb(253,240,221)', - indigoActive: 'rgb(25,23,95)', - indigoDim: 'rgb(52,47,197)', - indigoPrimary: BASE_COLOUR_MAP.indigo, - indigoBright: 'rgb(126,123,223)', - indigoLight: 'rgb(199,197,241)', - indigoSurface: 'rgb(227,226,248)', - pinkActive: 'rgb(68,14,40)', - pinkDim: 'rgb(174,35,102)', - pinkPrimary: BASE_COLOUR_MAP.pink, - pinkBright: 'rgb(222,89,153)', - pinkLight: 'rgb(244,205,224)', - pinkSurface: 'rgb(250,232,241)', - purpleActive: 'rgb(61,19,83)', - purpleDim: 'rgb(138,43,186)', - purplePrimary: BASE_COLOUR_MAP.purple, - purpleBright: 'rgb(184,110,221)', - purpleLight: 'rgb(227,198,241)', - purpleSurface: 'rgb(235,214,245)', - greyActive: 'rgb(38,38,38)', - greyDim: 'rgb(89,89,89)', - greyPrimary: BASE_COLOUR_MAP.grey, - greyBright: 'rgb(182,182,191)', - greyLight: 'rgb(232,232,232)', - greySurface: 'rgb(246,246,246)', +/** PALETTE COLOR */ + +export type Shade = + | 'active' + | 'dim' + | 'primary' + | 'bright' + | 'light' + | 'surface' + +export type Shades = { [key in Shade]: RawColor } + +export type Palette = { [key in PrimaryColor]: Shades } + +export const RAW_PALETTE_LIGHT: Palette = { + accent: { + active: [0, 54, 133], + dim: [5, 106, 255], + primary: RAW_PRIMARY_COLORS.blue, + bright: [86, 154, 255], + light: [209, 228, 255], + surface: [238, 245, 255], + }, + blue: { + active: [0, 54, 133], + dim: [5, 106, 255], + primary: RAW_PRIMARY_COLORS.blue, + bright: [86, 154, 255], + light: [209, 228, 255], + surface: [238, 245, 255], + }, + green: { + active: [7, 44, 33], + dim: [21, 132, 99], + primary: RAW_PRIMARY_COLORS.green, + bright: [30, 183, 137], + light: [203, 231, 220], + surface: [231, 244, 239], + }, + yellow: { + active: [66, 53, 5], + dim: [185, 147, 14], + primary: RAW_PRIMARY_COLORS.yellow, + bright: [240, 201, 60], + light: [255, 239, 173], + surface: [255, 245, 205], + }, + red: { + active: [40, 10, 6], + dim: [153, 37, 21], + primary: RAW_PRIMARY_COLORS.red, + bright: [227, 70, 49], + light: [240, 194, 194], + surface: [249, 231, 231], + }, + orange: { + active: [73, 44, 3], + dim: [195, 118, 9], + primary: RAW_PRIMARY_COLORS.orange, + bright: [246, 169, 60], + light: [251, 225, 188], + surface: [253, 240, 221], + }, + indigo: { + active: [25, 23, 95], + dim: [52, 47, 197], + primary: RAW_PRIMARY_COLORS.indigo, + bright: [126, 123, 223], + light: [199, 197, 241], + surface: [227, 226, 248], + }, + pink: { + active: [68, 14, 40], + dim: [174, 35, 102], + primary: RAW_PRIMARY_COLORS.pink, + bright: [222, 89, 153], + light: [244, 205, 224], + surface: [250, 232, 241], + }, + purple: { + active: [61, 19, 83], + dim: [138, 43, 186], + primary: RAW_PRIMARY_COLORS.purple, + bright: [184, 110, 221], + light: [227, 198, 241], + surface: [235, 214, 245], + }, + grey: { + active: [30, 33, 34], + dim: [89, 89, 89], + primary: RAW_PRIMARY_COLORS.grey, + bright: [182, 182, 191], + light: [232, 232, 232], + surface: [246, 246, 246], + }, +} as const + +export const RAW_PALETTE_DARK: Palette = { + accent: { + active: [238, 245, 255], + dim: [209, 228, 255], + primary: RAW_PRIMARY_COLORS.blue, + bright: [5, 106, 255], + light: [12, 69, 151], + surface: [13, 40, 81], + }, + blue: { + active: [238, 245, 255], + dim: [209, 228, 255], + primary: RAW_PRIMARY_COLORS.blue, + bright: [5, 106, 255], + light: [12, 69, 151], + surface: [13, 40, 81], + }, + green: { + active: [231, 244, 239], + dim: [203, 231, 220], + primary: RAW_PRIMARY_COLORS.green, + bright: [21, 132, 99], + light: [16, 74, 56], + surface: [21, 60, 49], + }, + yellow: { + active: [255, 245, 205], + dim: [255, 239, 173], + primary: RAW_PRIMARY_COLORS.yellow, + bright: [185, 147, 14], + light: [92, 75, 12], + surface: [55, 50, 34], + }, + red: { + active: [249, 231, 231], + dim: [240, 194, 194], + primary: RAW_PRIMARY_COLORS.red, + bright: [167, 38, 20], + light: [127, 19, 19], + surface: [40, 10, 6], + }, + orange: { + active: [253, 240, 221], + dim: [251, 225, 188], + primary: RAW_PRIMARY_COLORS.orange, + bright: [195, 118, 9], + light: [109, 67, 8], + surface: [88, 53, 3], + }, + indigo: { + active: [227, 226, 248], + dim: [199, 197, 241], + primary: [107, 103, 233], + bright: [52, 47, 197], + light: [34, 30, 144], + surface: [35, 33, 109], + }, + pink: { + active: [250, 232, 241], + dim: [244, 205, 224], + primary: RAW_PRIMARY_COLORS.pink, + bright: [174, 35, 102], + light: [118, 21, 68], + surface: [91, 17, 53], + }, + purple: { + active: [235, 214, 245], + dim: [227, 198, 241], + primary: RAW_PRIMARY_COLORS.purple, + bright: [138, 43, 186], + light: [94, 22, 131], + surface: [66, 20, 90], + }, + grey: { + active: [255, 255, 255], + dim: [232, 232, 232], + primary: RAW_PRIMARY_COLORS.grey, + bright: [93, 92, 98], + light: [66, 67, 71], + surface: [20, 20, 22], + }, +} as const + +export type PaletteColor = `${PrimaryColor}${Capitalize}` | PrimaryColor + +const flattenPalette = ( + palette: Palette, +): { [key in PaletteColor]: RawColor } => { + const paletteEntries = Object.entries(palette) as [ + PrimaryColor, + { [key in Shade]: RawColor }, + ][] + const primaryColorEntries = paletteEntries.map(([primaryColor, shades]) => [ + primaryColor, + shades.primary, + ]) + const paletteColorEntries = paletteEntries.reduce<[PaletteColor, RawColor][]>( + (acc, [primaryColor, shades]) => { + const shadeEntries = Object.entries(shades) as [Shade, RawColor][] + const shadeMap = shadeEntries.map(([shade, rawColor]) => { + const key = `${primaryColor}${shade + .charAt(0) + .toUpperCase()}${shade.slice(1)}` as PaletteColor + return [key, rawColor] as [PaletteColor, RawColor] + }) + return [...acc, ...shadeMap] + }, + [], + ) + return Object.fromEntries([ + ...primaryColorEntries, + ...paletteColorEntries, + ]) as { + [key in PaletteColor]: RawColor + } } -const darkShadedColors: { [key in ShadedColor]: string } = { - accentActive: 'rgb(238,245,255)', - accentDim: 'rgb(209,228,255)', - accentPrimary: BASE_COLOUR_MAP.blue, - accentBright: 'rgb(5,106,255)', - accentLight: 'rgb(12,69,151)', - accentSurface: 'rgb(32,57,95)', - blueActive: 'rgb(238,245,255)', - blueDim: 'rgb(209,228,255)', - bluePrimary: BASE_COLOUR_MAP.blue, - blueBright: 'rgb(5,106,255)', - blueLight: 'rgb(12,69,151)', - blueSurface: 'rgb(32,57,95)', - greenActive: 'rgb(5,106,255)', - greenDim: 'rgb(203,231,220)', - greenPrimary: BASE_COLOUR_MAP.green, - greenBright: 'rgb(21,132,99)', - greenLight: 'rgb(16,74,56)', - greenSurface: 'rgb(21,60,49)', - yellowActive: 'rgb(255,245,205)', - yellowDim: 'rgb(255,239,173)', - yellowPrimary: BASE_COLOUR_MAP.yellow, - yellowBright: 'rgb(185,147,14)', - yellowLight: 'rgb(92,75,12)', - yellowSurface: 'rgb(55,50,34)', - redActive: 'rgb(249,231,231)', - redDim: 'rgb(240,194,194)', - redPrimary: BASE_COLOUR_MAP.red, - redBright: 'rgb(167,38,20)', - redLight: 'rgb(127, 19, 19)', - redSurface: 'rgb(63,36,36)', - orangeActive: 'rgb(253,240,221)', - orangeDim: 'rgb(251,225,188)', - orangePrimary: BASE_COLOUR_MAP.orange, - orangeBright: 'rgb(195,118,9)', - orangeLight: 'rgb(109,67,8)', - orangeSurface: 'rgb(88,53,3)', - indigoActive: 'rgb(227,226,248)', - indigoDim: 'rgb(199,197,241)', - indigoPrimary: BASE_COLOUR_MAP.indigo, - indigoBright: 'rgb(52,47,197)', - indigoLight: 'rgb(34,30,144)', - indigoSurface: 'rgb(35,33,109)', - pinkActive: 'rgb(250,232,241)', - pinkDim: 'rgb(244,205,224)', - pinkPrimary: BASE_COLOUR_MAP.pink, - pinkBright: 'rgb(174,35,102)', - pinkLight: 'rgb(118,21,68)', - pinkSurface: 'rgb(91,17,53)', - purpleActive: 'rgb(235,214,245)', - purpleDim: 'rgb(227,198,241)', - purplePrimary: BASE_COLOUR_MAP.purple, - purpleBright: 'rgb(138,43,186)', - purpleLight: 'rgb(94,22,131)', - purpleSurface: 'rgb(66,20,90)', - greyActive: 'rgb(246,246,246)', - greyDim: 'rgb(232,232,232)', - greyPrimary: BASE_COLOUR_MAP.grey, - greyBright: 'rgb(93,92,98)', - greyLight: 'rgb(93,92,98)', - greySurface: 'rgb(20,20,22)', +const RAW_PALETTE_COLORS_LIGHT = flattenPalette(RAW_PALETTE_LIGHT) +const RAW_PALETTE_COLORS_DARK = flattenPalette(RAW_PALETTE_DARK) + +export const PALETTE_COLORS = Object.keys( + RAW_PALETTE_COLORS_LIGHT, +) as PaletteColor[] + +export type RawPalettes = { [key in Mode]: Palette } + +export const RAW_PALETTE_COLORS: RawPalettes = { + light: RAW_PALETTE_LIGHT, + dark: RAW_PALETTE_DARK, } -export const SHADED_COLORS = Object.keys(lightShadedColors) as ShadedColor[] - -export const ADDITIONAL_COLORS = [ - 'background', - 'backgroundPrimary', - 'backgroundSecondary', - 'text', - 'textPrimary', - 'textSecondary', - 'textAccent', - 'textDisabled', - 'border', -] as const - -export type AdditionalColour = typeof ADDITIONAL_COLORS[number] - -const lightAdditionalColors: { [key in AdditionalColour]: string } = { - background: 'rgb(255,255,255)', - backgroundPrimary: 'rgb(255,255,255)', - backgroundSecondary: lightShadedColors.greySurface, - text: 'rgb(38,38,38)', - textPrimary: 'rgb(38,38,38)', - textSecondary: lightShadedColors.greyPrimary, - textAccent: 'rgb(255,255,255)', - textDisabled: lightShadedColors.greyPrimary, - border: 'rgb(232,232,232)', +/** ADDITIONAL COLORS */ + +export type AdditionalColor = + | 'black' + | 'white' + | 'text' + | 'textPrimary' + | 'textSecondary' + | 'textAccent' + | 'textDisabled' + | 'background' + | 'backgroundPrimary' + | 'backgroundSecondary' + | 'border' + +const RAW_STATIC_COLORS: { [key in 'black' | 'white']: RawColor } = { + black: [30, 33, 34], + white: [255, 255, 255], +} + +const RAW_ADDITIONAL_COLORS_LIGHT: { [key in AdditionalColor]: RawColor } = { + black: RAW_STATIC_COLORS.black, + white: RAW_STATIC_COLORS.white, + text: RAW_STATIC_COLORS.black, + textPrimary: RAW_STATIC_COLORS.black, + textSecondary: RAW_PALETTE_LIGHT.grey.primary, + textAccent: RAW_STATIC_COLORS.white, + textDisabled: RAW_PALETTE_LIGHT.grey.bright, + background: RAW_STATIC_COLORS.white, + backgroundPrimary: RAW_STATIC_COLORS.white, + backgroundSecondary: RAW_PALETTE_LIGHT.grey.surface, + border: RAW_PALETTE_LIGHT.grey.light, } -const darkAdditionalColors: { [key in AdditionalColour]: string } = { - background: 'rgb(30,33,34)', - backgroundPrimary: 'rgb(30,33,34)', - backgroundSecondary: '', - text: 'rgb(255,255,255)', - textPrimary: 'rgb(255,255,255)', - textSecondary: darkShadedColors.greyPrimary, - textAccent: 'rgb(255,255,255)', - textDisabled: darkShadedColors.greyPrimary, - border: 'rgb(66,70,78)', +const RAW_ADDITIONAL_COLORS_DARK: { [key in AdditionalColor]: RawColor } = { + black: RAW_STATIC_COLORS.black, + white: RAW_STATIC_COLORS.white, + text: RAW_STATIC_COLORS.white, + textPrimary: RAW_STATIC_COLORS.white, + textSecondary: RAW_PALETTE_DARK.grey.primary, + textAccent: RAW_STATIC_COLORS.white, + textDisabled: RAW_PALETTE_DARK.grey.bright, + background: RAW_STATIC_COLORS.black, + backgroundPrimary: RAW_STATIC_COLORS.black, + backgroundSecondary: RAW_PALETTE_DARK.grey.surface, + border: RAW_PALETTE_DARK.grey.light, } -const gradients = { +export const ADDITIONAL_COLORS = Object.keys( + RAW_ADDITIONAL_COLORS_LIGHT, +) as AdditionalColor[] + +export type RawAdditionalColors = { + [key in Mode]: { [key in AdditionalColor]: RawColor } +} + +export const RAW_ADDITIONAL_COLORS: RawAdditionalColors = { + light: RAW_ADDITIONAL_COLORS_LIGHT, + dark: RAW_ADDITIONAL_COLORS_DARK, +} + +/** GRADIENTS */ +type Gradient = + | 'blueGradient' + | 'greenGradient' + | 'redGradient' + | 'purpleGradient' + | 'greyGradient' + +const GRADIENT_MAP: { [key in Gradient]: string } = { blueGradient: 'linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)', greenGradient: @@ -216,20 +350,62 @@ const gradients = { 'linear-gradient(330.4deg, #DFDFDF 4.54%, #959595 59.2%, #474747 148.85%)', } -export type Gradient = keyof typeof gradients +export type Color = PaletteColor | AdditionalColor | Gradient -export type Colour = BaseColour | ShadedColor | AdditionalColour | Gradient +export const rawColorToRGB = (color: RawColor): string => + `rgb(${color.join(', ')})` + +export const rawColorToRGBA = (color: RawColor, opacity = 1): string => + `rgba(${[...color, opacity].join(', ')})` + +export const rawColorToHex = (color: RawColor): string => { + return `#${color.map((c) => c.toString(16)).join('')}` +} + +export const rawColorToHSL = ([r, g, b]: RawColor): string => { + r /= 255 + g /= 255 + b /= 255 + const l = Math.max(r, g, b) + const s = l - Math.min(r, g, b) + const h = s + ? l === r + ? (g - b) / s + : l === g + ? 2 + (b - r) / s + : 4 + (r - g) / s + : 0 + const rawHsl = [ + 60 * h < 0 ? 60 * h + 360 : 60 * h, + 100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0), + (100 * (2 * l - s)) / 2, + ] + + return `hsl(${rawHsl[0].toFixed(0)}, ${rawHsl[1].toFixed( + 0, + )}%, ${rawHsl[2].toFixed(0)}%)` +} + +const convertMapColors = ( + map: { [key in T]: RawColor }, + converter: (color: RawColor) => string, +): { [key in T]: string } => { + return Object.fromEntries( + Object.entries(map).map(([key, color]: [string, RawColor]) => [ + key, + converter(color), + ]), + ) as { [key in T]: string } +} -export const lightColors: { [key in Colour]: string } = { - ...BASE_COLOUR_MAP, - ...lightShadedColors, - ...lightAdditionalColors, - ...gradients, +export const lightColors: { [key in Color]: string } = { + ...convertMapColors(RAW_PALETTE_COLORS_LIGHT, rawColorToRGB), + ...convertMapColors(RAW_ADDITIONAL_COLORS_LIGHT, rawColorToRGB), + ...GRADIENT_MAP, } -export const darkColors: { [key in Colour]: string } = { - ...BASE_COLOUR_MAP, - ...darkShadedColors, - ...darkAdditionalColors, - ...gradients, +export const darkColors: { [key in Color]: string } = { + ...convertMapColors(RAW_PALETTE_COLORS_DARK, rawColorToRGB), + ...convertMapColors(RAW_ADDITIONAL_COLORS_DARK, rawColorToRGB), + ...GRADIENT_MAP, } diff --git a/docs/package.json b/docs/package.json index 5b5654a2..7359a5c9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -33,7 +33,8 @@ "react-element-to-jsx-string": "^14.3.4", "react-live": "3.1.1", "react-transition-state": "^1.1.4", - "styled-components": "5.3.3" + "styled-components": "5.3.3", + "ts-pattern": "^4.3.0" }, "devDependencies": { "@mdx-js/loader": "^1.6.22", diff --git a/docs/public/downloads/ENSLogo.svg b/docs/public/downloads/ENSLogo.svg new file mode 100644 index 00000000..42fbe789 --- /dev/null +++ b/docs/public/downloads/ENSLogo.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/downloads/ENSLogoBlack.svg b/docs/public/downloads/ENSLogoBlack.svg new file mode 100644 index 00000000..498bd65b --- /dev/null +++ b/docs/public/downloads/ENSLogoBlack.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/public/downloads/ENSLogoWhite.svg b/docs/public/downloads/ENSLogoWhite.svg new file mode 100644 index 00000000..52acd640 --- /dev/null +++ b/docs/public/downloads/ENSLogoWhite.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/docs/public/downloads/ENSMark.svg b/docs/public/downloads/ENSMark.svg new file mode 100644 index 00000000..7a872e42 --- /dev/null +++ b/docs/public/downloads/ENSMark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/public/downloads/ENSMarkBlack.svg b/docs/public/downloads/ENSMarkBlack.svg new file mode 100644 index 00000000..6ea2e91b --- /dev/null +++ b/docs/public/downloads/ENSMarkBlack.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/public/downloads/ENSMarkWhite.svg b/docs/public/downloads/ENSMarkWhite.svg new file mode 100644 index 00000000..46f25574 --- /dev/null +++ b/docs/public/downloads/ENSMarkWhite.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/src/components/AdditionalColors/AdditionalColors.tsx b/docs/src/components/AdditionalColors/AdditionalColors.tsx new file mode 100644 index 00000000..b3d97a41 --- /dev/null +++ b/docs/src/components/AdditionalColors/AdditionalColors.tsx @@ -0,0 +1,93 @@ +import React from 'react' +import { + Box, + RAW_ADDITIONAL_COLORS, + RawColor, + ScrollBox, + useTheme, +} from '@ensdomains/thorin' +import { PaletteRow } from './components/PaletteRow' +import { PaletteModal } from '../PaletteModal/PaletteModal' + +const TextBackgroundRegex = /^(text|background)(.+)$/ + +export const AdditionalColors = () => { + const { mode } = useTheme() + const additionalColors = RAW_ADDITIONAL_COLORS[mode] + + const { text, bw, background } = Object.entries(additionalColors).reduce<{ + text: [string, RawColor][] + bw: [string, RawColor][] + background: [string, RawColor][] + }>( + (acc, [name, color]) => { + if (name === 'border') acc.background.push([name, color]) + if (['black', 'white'].includes(name)) acc.bw.push([name, color]) + if (TextBackgroundRegex.test(name)) { + const matches = name.match(TextBackgroundRegex) + const group = matches?.[1] as 'text' | 'background' + const shade = matches?.[2] as string + acc[group].push([shade, color]) + } + return acc + }, + { text: [], bw: [], background: [] }, + ) + + const [modalProps, setModalProps] = React.useState<{ + open: boolean + color?: string + shades?: [string, RawColor][] + selectedShade?: string + }>({ + open: false, + }) + + const onSelectShade = ({ + color, + shades, + selectedShade, + }: { + color?: string + shades: [string, RawColor][] + selectedShade: string + }) => { + setModalProps({ + open: true, + color, + shades, + selectedShade, + }) + } + + return ( + <> + + + + + + + + setModalProps({ open: false })} + /> + + ) +} diff --git a/docs/src/components/AdditionalColors/components/PaletteRow.tsx b/docs/src/components/AdditionalColors/components/PaletteRow.tsx new file mode 100644 index 00000000..94ea31b9 --- /dev/null +++ b/docs/src/components/AdditionalColors/components/PaletteRow.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import { Box, RawColor, Typography, rawColorToRGB } from '@ensdomains/thorin' +import { match, P } from 'ts-pattern' + +const PaletteCell = ({ + name, + color, + onClick, +}: { + name: string + color: RawColor + onClick: () => void +}) => { + return ( + + + {name} + + + + ) +} + +type PaletteRowProps = { + color?: string + shades: [string, RawColor][] + onSelectShade: (data: { + color?: string + shades: [string, RawColor][] + selectedShade: string + }) => void +} + +export const PaletteRow = ({ + color, + shades, + onSelectShade, +}: PaletteRowProps) => { + const createName = (shade: string, color?: string) => + match([shade, color]) + .with(['border', P._], () => `border`) + .with([P._, undefined], () => shade) + .otherwise(([shade, group]) => `${group} ${shade}`) + return ( + <> + + {shades.map(([shade, rawColor]) => ( + + onSelectShade({ + color: color, + shades: shades, + selectedShade: shade, + }) + } + /> + ))} + + + ) +} diff --git a/docs/src/components/Logos/Logos.tsx b/docs/src/components/Logos/Logos.tsx new file mode 100644 index 00000000..8369a963 --- /dev/null +++ b/docs/src/components/Logos/Logos.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import { Box, DownArrowSVG } from '@ensdomains/thorin' +import Image from 'next/image' + +type Item = { + src: string + alt: string + background?: 'background' | 'white' | 'black' +} +const Panel = ({ background = 'background', alt, src }: Item) => { + return ( + + {alt} + + + + + ) +} + +type LogosProps = { + items: Item[] +} + +export const Logos = ({ items }: LogosProps) => { + return ( + + {items.map((item) => ( + + ))} + + ) +} diff --git a/docs/src/components/MDX.tsx b/docs/src/components/MDX.tsx index 3997d5c2..a80c4d91 100644 --- a/docs/src/components/MDX.tsx +++ b/docs/src/components/MDX.tsx @@ -7,6 +7,9 @@ import { CodeBlock } from './CodeBlock/CodeBlock' import { Link } from './Link' import { SearchIcons } from './SearchIcons' import { PropsTable } from './PropsTable' +import { Palette } from './Palette/Palette' +import { AdditionalColors } from './AdditionalColors/AdditionalColors' +import { Logos } from './Logos/Logos' const StyledLink = (props: React.ComponentProps) => ( ) => ( export const MDX: MDXProviderProps['components'] = { PropsTable, SearchIcons, + Palette, + AdditionalColors, + Logos, // Default components // https://mdxjs.com/table-of-components/ a: (props) => , diff --git a/docs/src/components/Palette/Palette.tsx b/docs/src/components/Palette/Palette.tsx new file mode 100644 index 00000000..406285cf --- /dev/null +++ b/docs/src/components/Palette/Palette.tsx @@ -0,0 +1,110 @@ +import React from 'react' +import { + Box, + ScrollBox, + RAW_PALETTE_COLORS, + RawColor, + useTheme, +} from '@ensdomains/thorin' +import { grid, colorLabel } from './styles.css' +import { PaletteModal, PaletteModalProps } from '../PaletteModal/PaletteModal' + +const ColorLabel = ({ children }: React.PropsWithChildren<{}>) => ( + + {children} + +) + +const ShadeLabel = ({ children }: React.PropsWithChildren<{}>) => ( + + {children} + +) + +const ColorCell = ({ + color, + onClick, +}: { + color: Readonly<[number, number, number]> + onClick: () => void +}) => ( + +) + +export const Palette = () => { + const [modalProps, setModalProps] = React.useState<{ + open: boolean + color?: string + shades?: [string, RawColor][] + selectedShade?: string + }>({ + open: false, + color: undefined, + shades: undefined, + selectedShade: undefined, + }) + + const { mode } = useTheme() + const palette = RAW_PALETTE_COLORS[mode] + return ( + <> + +
+
+ {['active', 'dim', 'primary', 'bright', 'light', 'surface'].map( + (label) => ( + {label} + ), + )} + {Object.entries(palette).map(([primaryColor, colors]) => { + if (primaryColor === 'accent') return null + const colorEntries = Object.entries(colors) + return ( + + {primaryColor} + {colorEntries.map(([shade, color]) => ( + + setModalProps({ + open: true, + color: primaryColor, + shades: colorEntries, + selectedShade: shade, + }) + } + /> + ))} + + ) + })} +
+ + setModalProps({ open: false })} + /> + + ) +} diff --git a/docs/src/components/Palette/styles.css.ts b/docs/src/components/Palette/styles.css.ts new file mode 100644 index 00000000..f74a18be --- /dev/null +++ b/docs/src/components/Palette/styles.css.ts @@ -0,0 +1,16 @@ +import { style } from '@vanilla-extract/css' +import { commonVars } from '@ensdomains/thorin' + +export const grid = style({ + display: 'grid', + gap: commonVars.space['2'], + gridTemplateColumns: `${commonVars.space['5']} repeat(6, minmax(${commonVars.space['24']}, 1fr))`, + gridTemplateRows: `${commonVars.space['5']} repeat(9, ${commonVars.space['24']})`, + marginRight: commonVars.space['2'], + marginBottom: commonVars.space['2'], +}) + +export const colorLabel = style({ + writingMode: 'vertical-rl', + transform: 'rotate(180deg)', +}) diff --git a/docs/src/components/PaletteModal/PaletteModal.tsx b/docs/src/components/PaletteModal/PaletteModal.tsx new file mode 100644 index 00000000..9592f09b --- /dev/null +++ b/docs/src/components/PaletteModal/PaletteModal.tsx @@ -0,0 +1,139 @@ +import React, { ComponentProps } from 'react' +import { + Box, + Button, + Dialog, + RawColor, + RecordItem, + rawColorToHSL, + rawColorToHex, + rawColorToRGB, + rawColorToRGBA, +} from '@ensdomains/thorin' +import { match, P } from 'ts-pattern' + +const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1) + +export type PaletteModalProps = { + color?: string | null + shades?: [string, RawColor][] | null + selectedShade?: string | null +} & Omit, 'children'> + +export const PaletteModal = ({ + color, + shades, + selectedShade, + open, + ...props +}: PaletteModalProps) => { + const [selectedIndex, setSelectedIndex] = React.useState(0) + React.useEffect(() => { + if (open && shades && selectedShade) { + setSelectedIndex( + shades.findIndex(([name]) => name === selectedShade) || 0, + ) + } + }, [open, shades, selectedShade]) + + const [shadeName, shadeRawColor] = shades?.[selectedIndex] || [] + + const { title, variable } = match([color, shadeName]) + .with([P._, 'border'], () => ({ + title: 'Border', + variable: 'border', + })) + .with([undefined, P.string], ([, s]) => ({ + title: capitalize(s), + variable: s, + })) + .with([P.string, P.string], ([c, s]) => ({ + title: `${capitalize(c)} / ${capitalize(s)}`, + variable: `${c}${capitalize(s)}`, + })) + .otherwise(() => ({ title: '', variable: '' })) + + return ( + + + + + + {shades?.map(([name, color], i) => ( + setSelectedIndex(i)} + /> + ))} + + + + + {variable} + + {shadeRawColor && ( + <> + + {rawColorToHex(shadeRawColor)} + + + {rawColorToRGB(shadeRawColor)} + + + {rawColorToRGBA(shadeRawColor, 1)} + + + {rawColorToHSL(shadeRawColor)} + + + )} + + + + + Done + + } + > + + ) +} diff --git a/docs/src/components/SideBar.tsx b/docs/src/components/SideBar.tsx index bc70d903..5bb30d5f 100644 --- a/docs/src/components/SideBar.tsx +++ b/docs/src/components/SideBar.tsx @@ -130,7 +130,7 @@ export const SideBar = ({ open, links }: { open: boolean; links: Links }) => { - }>Getting Started + }>Components {links.map(({ name, links }) => (
+ + +# Additional colors + + + \ No newline at end of file diff --git a/docs/src/guides/logo.mdx b/docs/src/guides/logo.mdx new file mode 100644 index 00000000..d0033dd0 --- /dev/null +++ b/docs/src/guides/logo.mdx @@ -0,0 +1,16 @@ +--- +title: Logo +description: The main logo should be used instead of the mark logo in most situations. +--- + +# Main Logo + +Where possible, use the gradient blue version. Where possible Do not edit, change, distort or recolour the logo. + + + +# Mark + +Where possible, use the gradient blue version. Where possible Do not edit, change, distort or recolour the logo. + + diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 456cc909..4d45158e 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "~/*": ["./src/*"] + "~/*": ["./src/*"], + "@/*": ["../components/*"], }, "incremental": true, "target": "esnext", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f8cd0b0..3eb9c9ca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -242,6 +242,7 @@ importers: rimraf: ^3.0.2 styled-components: 5.3.3 stylelint-webpack-plugin: ^3.3.0 + ts-pattern: ^4.3.0 typescript: ^4.6.2 utility-types: ^3.10.0 dependencies: @@ -264,6 +265,7 @@ importers: react-live: 3.1.1_biqbaboplfbrettd7655fr4n2y react-transition-state: 1.1.4_biqbaboplfbrettd7655fr4n2y styled-components: 5.3.3_biqbaboplfbrettd7655fr4n2y + ts-pattern: 4.3.0 devDependencies: '@mdx-js/loader': 1.6.22_react@18.2.0 '@mdx-js/react': 1.6.22_react@18.2.0