add logo and color pages + updated colors

ensdomains · Oct 21, 2023 · ed5242d · ed5242d
1 parent a2438e7
commit ed5242d
Show file tree

Hide file tree

Showing 35 changed files with 1,125 additions and 278 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +17,15 @@ 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')
     .with('icon', () => `$${color}Primary`)
     .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<null>) => {
+  return (
+    <Box
+      maxHeight="60vh"
+      maxWidth={{ base: '100vw', sm: '$128' }}
+      width={{ base: '100vw', sm: '80vw' }}
+    >
+      <ScrollBox height="$full" width="$full">
+        <Box paddingRight="$2">{children}</Box>
+      </ScrollBox>
+    </Box>
+  )
+}
+
 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
@@ -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
@@ -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