From e23336a0990243012064767aa69c5f99e5afe196 Mon Sep 17 00:00:00 2001 From: JustJousting Date: Tue, 25 Nov 2025 03:30:28 +0200 Subject: [PATCH 1/4] feat: sync theme variables with figma --- .../src/themes/design/0_primitives.ts | 32 +- .../src/themes/design/1_sizes_spaces.ts | 328 +-- .../src/themes/design/1_surfaces_text.ts | 801 ++++--- .../curve-ui-kit/src/themes/design/2_theme.ts | 1959 +++++++++-------- 4 files changed, 1703 insertions(+), 1417 deletions(-) diff --git a/packages/curve-ui-kit/src/themes/design/0_primitives.ts b/packages/curve-ui-kit/src/themes/design/0_primitives.ts index 7573c85fb..e6ab523ef 100644 --- a/packages/curve-ui-kit/src/themes/design/0_primitives.ts +++ b/packages/curve-ui-kit/src/themes/design/0_primitives.ts @@ -54,20 +54,6 @@ export const Blues = { '950': '#171e55', } as const -export const Yellows = { - '50': '#fff9e6', - '100': '#fff9f0', - '200': '#fff1db', - '300': '#ffe6bd', - '400': '#ffd88b', - '500': '#ffc300', - '600': '#e0ab00', - '700': '#c19300', - '800': '#a37c0c', - '900': '#84671d', - '950': '#665223', -} as const - export const Oranges = { '50': '#f0ddd1', '100': '#f3cfb9', @@ -82,6 +68,20 @@ export const Oranges = { '950': '#4e2708', } as const +export const Yellows = { + '50': '#fffbf5', + '100': '#fff9f0', + '200': '#fff1db', + '300': '#ffe6bd', + '400': '#ffd88b', + '500': '#ffc300', + '600': '#e0ab00', + '700': '#c19300', + '800': '#a37c0c', + '900': '#84671d', + '950': '#665223', +} as const + export const Violets = { '50': '#efedfc', '100': '#dbd9f7', @@ -98,6 +98,7 @@ export const Violets = { export const Spacing = { '50': '0', + '75': '0.0625rem', // 1px '100': '0.125rem', // 2px '200': '0.25rem', // 4px '300': '0.5rem', // 8px @@ -110,6 +111,8 @@ export const Spacing = { } as const export const Sizing = { + '10': '0.0625rem', // 1px + '25': '0.125rem', // 2px '50': '0.25rem', // 4px '100': '0.5rem', // 8px '125': '0.75rem', // 12px @@ -119,7 +122,6 @@ export const Sizing = { '300': '1.5rem', // 24px '350': '1.75rem', // 28px '400': '2rem', // 32px - '450': '2.25rem', // 36px '500': '2.5rem', // 40px '600': '3rem', // 48px '650': '3.5rem', // 56px diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts index 4580ade32..9d1d76ccd 100644 --- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts +++ b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts @@ -1,185 +1,195 @@ import { Sizing, Spacing } from './0_primitives' const MappedSpacing = { - xxs: { - mobile: Spacing[100], - tablet: Spacing[100], - desktop: Spacing[100], + '3xs': { + mobile: Spacing['75'], + tablet: Spacing['75'], + desktop: Spacing['75'], + }, + 'xxs': { + mobile: Spacing['100'], + tablet: Spacing['100'], + desktop: Spacing['100'], + }, + 'xs': { + mobile: Spacing['100'], + tablet: Spacing['200'], + desktop: Spacing['200'], + }, + 'sm': { + mobile: Spacing['200'], + tablet: Spacing['300'], + desktop: Spacing['300'], + }, + 'md': { + mobile: Spacing['300'], + tablet: Spacing['400'], + desktop: Spacing['400'], + }, + 'lg': { + mobile: Spacing['400'], + tablet: Spacing['500'], + desktop: Spacing['500'], + }, + 'xl': { + mobile: Spacing['500'], + tablet: Spacing['600'], + desktop: Spacing['600'], + }, + 'xxl': { + mobile: Spacing['600'], + tablet: Spacing['700'], + desktop: Spacing['700'], }, - xs: { - mobile: Spacing[100], - tablet: Spacing[200], - desktop: Spacing[200], - }, - sm: { - mobile: Spacing[200], - tablet: Spacing[300], - desktop: Spacing[300], - }, - md: { - mobile: Spacing[300], - tablet: Spacing[400], - desktop: Spacing[400], - }, - lg: { - mobile: Spacing[400], - tablet: Spacing[500], - desktop: Spacing[500], - }, - xl: { - mobile: Spacing[500], - tablet: Spacing[600], - desktop: Spacing[600], - }, - xxl: { - mobile: Spacing[600], - tablet: Spacing[700], - desktop: Spacing[700], + '3xl': { + mobile: Spacing['700'], + tablet: Spacing['800'], + desktop: Spacing['800'], }, } as const const MappedSizing = { - xxs: { - mobile: Sizing[50], - tablet: Sizing[100], - desktop: Sizing[100], - }, - xs: { - mobile: Sizing[150], - tablet: Sizing[200], - desktop: Sizing[200], - }, - sm: { - mobile: Sizing[200], - tablet: Sizing[300], - desktop: Sizing[300], - }, - md: { - mobile: Sizing[300], - tablet: Sizing[400], - desktop: Sizing[400], - }, - lg: { - mobile: Sizing[400], - tablet: Sizing[500], - desktop: Sizing[500], - }, - xl: { - mobile: Sizing[500], - tablet: Sizing[600], - desktop: Sizing[600], - }, - xxl: { - mobile: Sizing[600], - tablet: Sizing[700], - desktop: Sizing[700], + 'xxs': { + mobile: Sizing['50'], + tablet: Sizing['100'], + desktop: Sizing['100'], + }, + 'xs': { + mobile: Sizing['150'], + tablet: Sizing['200'], + desktop: Sizing['200'], + }, + 'sm': { + mobile: Sizing['200'], + tablet: Sizing['300'], + desktop: Sizing['300'], + }, + 'md': { + mobile: Sizing['300'], + tablet: Sizing['400'], + desktop: Sizing['400'], + }, + 'lg': { + mobile: Sizing['400'], + tablet: Sizing['500'], + desktop: Sizing['500'], + }, + 'xl': { + mobile: Sizing['500'], + tablet: Sizing['600'], + desktop: Sizing['600'], + }, + 'xxl': { + mobile: Sizing['600'], + tablet: Sizing['700'], + desktop: Sizing['700'], }, '3xl': { - mobile: Sizing[700], - tablet: Sizing[800], - desktop: Sizing[800], + mobile: Sizing['700'], + tablet: Sizing['800'], + desktop: Sizing['800'], }, } as const const MappedIconSize = { - xxs: { - mobile: Sizing[100], - tablet: Sizing[125], - desktop: Sizing[125], - }, - xs: { - mobile: Sizing[125], - tablet: Sizing[150], - desktop: Sizing[150], - }, - sm: { - mobile: Sizing[150], - tablet: Sizing[200], - desktop: Sizing[200], - }, - md: { - mobile: Sizing[250], - tablet: Sizing[250], - desktop: Sizing[250], - }, - lg: { - mobile: Sizing[300], - tablet: Sizing[350], - desktop: Sizing[350], - }, - xl: { - mobile: Sizing[400], - tablet: Sizing[500], - desktop: Sizing[500], - }, - xxl: { - mobile: Sizing[500], - tablet: Sizing[600], - desktop: Sizing[600], + 'xxs': { + mobile: Sizing['100'], + tablet: Sizing['125'], + desktop: Sizing['125'], + }, + 'xs': { + mobile: Sizing['125'], + tablet: Sizing['150'], + desktop: Sizing['150'], + }, + 'sm': { + mobile: Sizing['150'], + tablet: Sizing['200'], + desktop: Sizing['200'], + }, + 'md': { + mobile: Sizing['250'], + tablet: Sizing['250'], + desktop: Sizing['250'], + }, + 'lg': { + mobile: Sizing['300'], + tablet: Sizing['350'], + desktop: Sizing['350'], + }, + 'xl': { + mobile: Sizing['400'], + tablet: Sizing['500'], + desktop: Sizing['500'], + }, + 'xxl': { + mobile: Sizing['500'], + tablet: Sizing['600'], + desktop: Sizing['600'], }, '3xl': { - mobile: Sizing[600], - tablet: Sizing[700], - desktop: Sizing[700], + mobile: Sizing['600'], + tablet: Sizing['700'], + desktop: Sizing['700'], }, '4xl': { - mobile: Sizing[700], - tablet: Sizing[800], - desktop: Sizing[800], + mobile: Sizing['700'], + tablet: Sizing['800'], + desktop: Sizing['800'], }, } as const const MappedGrid = { - Column_Spacing: { - mobile: Spacing[300], - tablet: Spacing[400], - desktop: Spacing[500], + 'Column_Spacing': { + mobile: Spacing['300'], + tablet: Spacing['400'], + desktop: Spacing['500'], }, - Row_Spacing: { - mobile: Spacing[300], - tablet: Spacing[400], - desktop: Spacing[500], + 'Row_Spacing': { + mobile: Spacing['300'], + tablet: Spacing['400'], + desktop: Spacing['500'], }, } as const const MappedFontSize = { - xs: { - mobile: Sizing[125], - tablet: Sizing[125], - desktop: Sizing[125], - }, - sm: { - mobile: Sizing[150], - tablet: Sizing[150], - desktop: Sizing[150], - }, - md: { - mobile: Sizing[200], - tablet: Sizing[200], - desktop: Sizing[200], - }, - lg: { - mobile: Sizing[250], - tablet: Sizing[300], - desktop: Sizing[300], - }, - xl: { - mobile: Sizing[350], - tablet: Sizing[400], - desktop: Sizing[400], - }, - xxl: { - mobile: Sizing[500], - tablet: Sizing[600], - desktop: Sizing[700], + 'xs': { + mobile: Sizing['125'], + tablet: Sizing['125'], + desktop: Sizing['125'], + }, + 'sm': { + mobile: Sizing['150'], + tablet: Sizing['150'], + desktop: Sizing['150'], + }, + 'md': { + mobile: Sizing['200'], + tablet: Sizing['200'], + desktop: Sizing['200'], + }, + 'lg': { + mobile: Sizing['250'], + tablet: Sizing['300'], + desktop: Sizing['300'], + }, + 'xl': { + mobile: Sizing['350'], + tablet: Sizing['400'], + desktop: Sizing['400'], + }, + 'xxl': { + mobile: Sizing['500'], + tablet: Sizing['600'], + desktop: Sizing['700'], }, } as const const MappedButtonSize = { - xs: Sizing[300], // 24px - sm: Sizing[500], // 40px - md: Sizing[600], // 48px - lg: Sizing[650], // 56px + xs: Sizing['300'], // XS + sm: Sizing['500'], // S + md: Sizing['600'], // M + lg: Sizing['650'], // L } const SliderHeight = { @@ -219,32 +229,32 @@ const MappedFontWeight = { } as const const MappedLineHeight = { - xs: { + 'xs': { mobile: '0.75rem', // 12px tablet: '0.75rem', // 12px desktop: '0.875rem', // 14px }, - sm: { + 'sm': { mobile: '0.875rem', // 14px tablet: '0.875rem', // 14px desktop: '1rem', // 16px }, - md: { + 'md': { mobile: '1.5rem', // 24px tablet: '1.5rem', // 24px desktop: '1.5rem', // 24px }, - lg: { + 'lg': { mobile: '1.5rem', // 24px tablet: '1.5rem', // 24px desktop: '2rem', // 32px }, - xl: { + 'xl': { mobile: '2rem', // 32px tablet: '2rem', // 32px desktop: '2.5rem', // 40px }, - xxl: { + 'xxl': { mobile: '2.5rem', // 40px tablet: '2.5rem', // 40px desktop: '4rem', // 64px @@ -252,8 +262,8 @@ const MappedLineHeight = { } as const const MappedModalWidth = { - xs: '100vw', // 100% - sm: '100vw', // 100% + xs: '19rem', // 304px + sm: '24rem', // 384px md: '28rem', // 448px lg: '32rem', // 512px xl: '36rem', // 576px diff --git a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts index bc661dd26..d6a618509 100644 --- a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts +++ b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts @@ -1,67 +1,64 @@ -import { Blues, Grays, Greens, Reds, Violets } from './0_primitives' +import { Blues, Grays, Greens, Reds, Violets, Yellows, Oranges } from './0_primitives' function createLightSurfaces() { const Text = { - Primary: Grays[950], - Secondary: Grays[700], - Tertiary: Grays[500], - Disabled: Grays[500], - Highlight: Blues[500], + Primary: Grays['950'], + Secondary: Grays['700'], + Tertiary: Grays['500'], + Disabled: Grays['500'], + Highlight: Blues['500'], Feedback: { - Success: Greens[600], - Warning: Reds[400], - Danger: Reds[400], - Error: Reds[500], - Inverted: Grays[50], + Success: Greens['600'], + Warning: Oranges['500'], + Error: Reds['500'], }, FilledFeedback: { - Info: { - Primary: Grays[50], - Secondary: Grays[300], + info: { + primary: Blues['500'], + secondary: Grays['700'], }, - Highlight: { - Primary: Grays[50], - Secondary: Grays[200], + highlight: { + primary: Grays['50'], + secondary: Grays['300'], }, - Warning: { - Primary: Grays[50], - Secondary: Grays[700], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays[50], - Secondary: Grays[300], + alert: { + primary: Grays['50'], + secondary: Grays['300'], }, - Success: { - Primary: Grays[50], - Secondary: Grays[300], + success: { + primary: Grays['50'], + secondary: Grays['300'], }, }, } as const const Layer = { '1': { - Fill: Grays[50], - Outline: Grays[300], + Fill: Grays['50'], + Outline: Grays['300'], }, '2': { - Fill: Grays[100], - Outline: Grays[200], + Fill: Grays['100'], + Outline: Grays['200'], }, '3': { - Fill: Grays[50], - Outline: Grays[300], - }, - Highlight: Blues[500], - TypeAction: { - Selected: Blues[100], - Hover: Grays[150], + Fill: Grays['50'], + Outline: Grays['300'], }, Feedback: { - Info: Blues[500], - Success: Greens[600], - Warning: Reds[300], - Danger: Reds[400], - Error: Reds[500], + Info: Blues['500'], + Success: Greens['600'], + Warning: Yellows['500'], + Error: Reds['500'], + }, + Highlight: Blues['500'], + TypeAction: { + Selected: Blues['100'], + Hover: Grays['150'], }, } as const @@ -69,32 +66,44 @@ function createLightSurfaces() { Text, Layer, Tables: { - Header: { Fill: Grays[200] }, + Row: { + Default: Layer['1'].Fill, + Selected: Layer.TypeAction.Hover, + Hover: Layer.TypeAction.Selected, + }, + Header: { + Fill: Grays['200'], + 'Label_&_Icon': { + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, + }, + }, }, Badges: { Label: { Default: Text.Primary, - Active: Grays[10], - Alert: Grays[10], - Highlight: Blues[500], - Warning: Grays[975], - Accent: Grays[10], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['500'], + Warning: Grays['975'], + Accent: Grays['10'], }, Border: { - Default: Grays[400], - Active: Greens[400], - Alert: Reds[500], - Highlight: Blues[500], - Warning: Reds[300], - Accent: Blues[500], + Default: Grays['400'], + Active: Blues['500'], + Alert: Reds['500'], + Highlight: Blues['500'], + Warning: Oranges['500'], + Accent: Blues['500'], }, Fill: { - Default: Layer[1].Fill, - Active: Greens[400], - Alert: Reds[500], - Highlight: Layer[1].Fill, - Warning: Reds[300], - Accent: Blues[500], + Default: Layer['1'].Fill, + Active: Greens['400'], + Alert: Reds['500'], + Highlight: Layer['1'].Fill, + Warning: Yellows['500'], + Accent: Blues['500'], }, }, } as const @@ -102,66 +111,63 @@ function createLightSurfaces() { function createDarkSurfaces() { const Text = { - Primary: Grays[50], - Secondary: Grays[300], - Tertiary: Grays[400], - Disabled: Grays[500], - Highlight: Blues[400], - Feedback: { - Success: Greens[400], - Warning: Reds[300], - Danger: Reds[400], - Error: Reds[500], - Inverted: Grays[950], - }, + primary: Grays['50'], + secondary: Grays['300'], + tertiary: Grays['400'], + Disabled: Grays['500'], + highlight: Blues['400'], FilledFeedback: { - Info: { - Primary: Blues[300], - Secondary: Grays[300], + info: { + primary: Blues['300'], + secondary: Grays['300'], }, - Highlight: { - Primary: Blues[500], - Secondary: Grays[700], + highlight: { + primary: Blues['500'], + secondary: Grays['700'], }, - Warning: { - Primary: Grays[50], - Secondary: Grays[150], + warning: { + primary: Grays['50'], + secondary: Grays['150'], }, - Alert: { - Primary: Grays[50], - Secondary: Grays[150], + alert: { + primary: Grays['50'], + secondary: Grays['300'], }, - Success: { - Primary: Grays[950], - Secondary: Grays[700], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, + Feedback: { + Success: Greens['400'], + Warning: Yellows['500'], + Error: Reds['500'], + }, } as const const Layer = { '1': { - Fill: Grays[950], - Outline: Grays[900], + Fill: Grays['950'], + Outline: Grays['900'], }, '2': { - Fill: Grays[900], - Outline: Grays[800], + Fill: Grays['900'], + Outline: Grays['800'], }, '3': { - Fill: Grays[800], - Outline: Grays[700], - }, - Highlight: Blues[500], - TypeAction: { - Selected: Blues[900], - Hover: Grays[800], + Fill: Grays['800'], + Outline: Grays['700'], }, Feedback: { - Info: Blues[50], - Success: Greens[300], - Warning: Reds[400], - Danger: Reds[400], - Error: Reds[500], + Info: Blues['50'], + Success: Greens['300'], + Warning: Oranges['500'], + Error: Reds['500'], + }, + Highlight: Blues['50'], + TypeAction: { + Selected: Blues['900'], + Hover: Grays['750'], }, } as const @@ -169,32 +175,44 @@ function createDarkSurfaces() { Text, Layer, Tables: { - Header: { Fill: Grays[800] }, + Row: { + Default: Layer['1'].Fill, + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + }, + Header: { + Fill: Grays['800'], + 'Label_&_Icon': { + Default: Text.secondary, + Hover: Text.highlight, + Active: Text.primary, + }, + }, }, Badges: { Label: { - Default: Text.Primary, - Active: Grays[10], - Alert: Grays[10], - Highlight: Blues[400], - Warning: Grays[975], - Accent: Grays[10], + Default: Grays['10'], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['400'], + Warning: Grays['975'], + Accent: Grays['10'], }, Border: { - Default: Grays[600], - Active: Greens[500], - Alert: Reds[500], - Highlight: Blues[400], - Warning: Reds[300], - Accent: Blues[400], + Default: Grays['600'], + Active: Blues['400'], + Alert: Reds['500'], + Highlight: Blues['400'], + Warning: Oranges['500'], + Accent: Blues['400'], }, Fill: { - Default: Layer[1].Fill, - Active: Greens[500], - Alert: Reds[500], - Highlight: Layer[1].Fill, - Warning: Reds[300], - Accent: Blues[400], + Default: Layer['1'].Fill, + Active: Greens['500'], + Alert: Reds['500'], + Highlight: Layer['1'].Fill, + Warning: Yellows['500'], + Accent: Blues['400'], }, }, } as const @@ -202,194 +220,217 @@ function createDarkSurfaces() { function createChadSurfaces() { const Text = { - Primary: Grays[950], - Secondary: Grays[750], - Tertiary: Grays[700], - Disabled: Grays[500], - Highlight: Violets[600], Feedback: { - Success: Greens[600], - Warning: Reds[400], - Danger: Reds[400], - Error: Reds[500], - Inverted: Grays[50], + Warning: Oranges['500'], + Success: Greens['600'], + Error: Reds['500'], }, FilledFeedback: { - Info: { - Primary: Violets[500], - Secondary: Grays[700], + info: { + primary: Violets['500'], + secondary: Grays['700'], }, - Highlight: { - Primary: Blues[50], - Secondary: Grays[300], + highlight: { + primary: Grays['50'], + secondary: Grays['300'], }, - Warning: { - Primary: Grays[950], - Secondary: Grays[700], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays[50], - Secondary: Grays[300], + alert: { + primary: Grays['50'], + secondary: Grays['300'], }, - Success: { - Primary: Grays[50], - Secondary: Grays[300], + success: { + primary: Grays['50'], + secondary: Grays['300'], }, }, + Primary: Grays['950'], + Secondary: Grays['750'], + Tertiary: Grays['700'], + Disabled: Grays['500'], + Highlight: Violets['600'], } as const + const Layer = { '1': { - Fill: Grays[150], - Outline: Grays[400], + Fill: Grays['150'], + Outline: Grays['400'], }, '2': { - Fill: Grays[300], - Outline: Grays[500], + Fill: Grays['300'], + Outline: Grays['500'], }, '3': { - Fill: Grays[400], - Outline: Grays[600], - }, - Highlight: Violets[700], - TypeAction: { - Selected: Violets[50], - Hover: Violets[200], + Fill: Grays['400'], + Outline: Grays['600'], }, Feedback: { - Info: Violets[700], - Success: Greens[600], - Warning: Reds[300], - Danger: Reds[400], - Error: Reds[500], + Info: Violets['700'], + Success: Greens['600'], + Warning: Yellows['500'], + Error: Reds['500'], + }, + TypeAction: { + Selected: Violets['50'], + Hover: Violets['200'], }, + Highlight: Violets['800'], } as const return { Text, Layer, Tables: { - Header: { Fill: Layer[3].Fill }, + Row: { + Default: Layer['1'].Fill, + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + }, + Header: { + Fill: Layer['3'].Fill, + 'Label_&_Icon': { + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, + }, + }, }, Badges: { Label: { Default: Text.Primary, - Active: Grays[10], - Alert: Grays[10], - Highlight: Violets[800], - Warning: Grays[975], - Accent: Grays[10], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Violets['800'], + Warning: Grays['975'], + Accent: Grays['10'], }, Border: { - Default: Grays[975], - Active: Greens[500], - Alert: Reds[500], - Highlight: Violets[800], - Warning: Reds[300], - Accent: Violets[800], + Default: Grays['400'], + Active: Violets['500'], + Alert: Reds['500'], + Highlight: Violets['800'], + Warning: Oranges['500'], + Accent: Violets['800'], }, Fill: { - Default: Layer[1].Fill, - Active: Greens[500], - Alert: Reds[500], - Highlight: Layer[1].Fill, - Warning: Reds[300], - Accent: Violets[800], + Default: Layer['1'].Fill, + Active: Greens['500'], + Alert: Reds['500'], + Highlight: Layer['1'].Fill, + Warning: Yellows['500'], + Accent: Violets['800'], }, }, } as const } function createLightInvertedSurfaces() { - const Layer = { - '1': { - Fill: Grays[950], - Outline: Grays[600], - }, - '2': { - Fill: Grays[900], - Outline: Grays[750], - }, - '3': { - Fill: Grays[750], - Outline: Grays[600], - }, - Highlight: Blues[500], - TypeAction: { - Selected: Grays[850], - Hover: Grays[900], - }, - Feedback: { - Info: Blues[800], - Success: Greens[300], - Warning: Reds[400], - Error: Reds[500], - }, - } as const const Text = { - Primary: Grays[50], - Secondary: Grays[300], - Tertiary: Grays[400], - Disabled: Grays[500], - Highlight: Blues[500], + Primary: Grays['50'], + Secondary: Grays['300'], + Tertiary: Grays['400'], + Disabled: Grays['500'], + Highlight: Blues['300'], Feedback: { - Success: Greens[300], - Warning: Reds[300], - Error: Reds[500], - Inverted: Grays[950], + Success: Greens['300'], + Warning: Oranges['500'], + Error: Reds['500'], }, FilledFeedback: { - Info: { - Primary: Blues[300], - Secondary: Grays[300], + info: { + primary: Blues['300'], + secondary: Grays['300'], }, - Highlight: { - Primary: Blues[500], - Secondary: Grays[700], + highlight: { + primary: Grays['950'], + secondary: Grays['700'], }, - Warning: { - Primary: Grays[50], - Secondary: Grays[150], + warning: { + primary: Grays['25'], + secondary: Grays['300'], }, - Alert: { - Primary: Grays[50], - Secondary: Grays[150], + alert: { + primary: Grays['950'], + secondary: Grays['700'], }, - Success: { - Primary: Grays[950], - Secondary: Grays[700], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, } as const + + const Layer = { + '1': { + Fill: Grays['950'], + Outline: Grays['600'], + }, + '2': { + Fill: Grays['900'], + Outline: Grays['750'], + }, + '3': { + Fill: Grays['750'], + Outline: Grays['600'], + }, + Feedback: { + Info: Blues['800'], + Success: Greens['300'], + Warning: Oranges['500'], + Error: Reds['500'], + }, + Highlight: Blues['500'], + TypeAction: { + Selected: Grays['750'], + Hover: Grays['850'], + }, + } as const + return { Text, Layer, Tables: { - Header: { Fill: Grays[800] }, + Row: { + Default: Layer['1'].Fill, + Selected: Layer.TypeAction.Hover, + Hover: Layer.TypeAction.Selected, + }, + Header: { + Fill: Grays['800'], + 'Label_&_Icon': { + Default: Text.Primary, + Hover: Text.Highlight, + Active: Text.Secondary, + }, + }, }, Badges: { Label: { Default: Text.Primary, - Active: Grays[10], - Alert: Grays[10], - Highlight: Blues[400], - Warning: Grays[975], - Accent: Grays[10], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['400'], + Warning: Grays['975'], + Accent: Grays['10'], }, Border: { - Default: Grays[600], - Active: Greens[400], - Alert: Reds[500], - Highlight: Blues[400], - Warning: Reds[300], - Accent: Blues[400], + Default: Grays['600'], + Active: Blues['400'], + Alert: Reds['500'], + Highlight: Blues['400'], + Warning: Oranges['500'], + Accent: Blues['400'], }, Fill: { - Default: Layer[1].Fill, - Active: Greens[400], - Alert: Reds[500], - Highlight: Grays[10], - Warning: Reds[300], - Accent: Blues[400], + Default: Layer['1'].Fill, + Active: Greens['400'], + Alert: Reds['500'], + Highlight: Grays['10'], + Warning: Yellows['500'], + Accent: Blues['400'], }, }, } as const @@ -397,95 +438,108 @@ function createLightInvertedSurfaces() { function createDarkInvertedSurfaces() { const Text = { - Primary: Grays[950], - Secondary: Grays[700], - Tertiary: Grays[600], - Disabled: Grays[400], - Highlight: Blues[500], - Feedback: { - Success: Greens[600], - Warning: Reds[400], - Error: Reds[500], - Inverted: Grays[50], - }, + primary: Grays['950'], + secondary: Grays['750'], + tertiary: Grays['700'], + Disabled: Grays['500'], + highlight: Blues['500'], FilledFeedback: { - Info: { - Primary: Grays[50], - Secondary: Grays[300], + info: { + primary: Grays['950'], + secondary: Grays['700'], }, - Highlight: { - Primary: Grays[50], - Secondary: Grays[200], + highlight: { + primary: Blues['300'], + secondary: Grays['300'], }, - Warning: { - Primary: Grays[950], - Secondary: Grays[700], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays[50], - Secondary: Grays[300], + alert: { + primary: Grays['950'], + secondary: Grays['700'], }, - Success: { - Primary: Grays[50], - Secondary: Grays[300], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, + Feedback: { + Success: Greens['600'], + Warning: Oranges['500'], + Error: Reds['500'], + }, } as const + const Layer = { '1': { - Fill: Grays[75], - Outline: Grays[300], + Fill: Grays['75'], + Outline: Grays['300'], }, '2': { - Fill: Grays[100], - Outline: Grays[200], + Fill: Grays['100'], + Outline: Grays['200'], }, '3': { - Fill: Grays[50], - Outline: Grays[300], - }, - Highlight: Blues[500], - TypeAction: { - Selected: Blues[100], - Hover: Blues[50], + Fill: Grays['50'], + Outline: Grays['300'], }, Feedback: { - Info: Blues[500], - Success: Greens[600], - Warning: Reds[300], - Error: Reds[500], + Info: Blues['500'], + Success: Greens['600'], + Warning: Yellows['500'], + Error: Reds['500'], + }, + Highlight: Blues['50'], + TypeAction: { + Selected: Blues['50'], + Hover: Blues['100'], }, } as const + return { Text, Layer, Tables: { - Header: { Fill: Grays[200] }, + Row: { + Default: Layer['1'].Fill, + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + }, + Header: { + Fill: Grays['200'], + 'Label_&_Icon': { + Default: Text.secondary, + Hover: Text.highlight, + Active: Text.primary, + }, + }, }, Badges: { Label: { - Default: Grays[975], - Active: Grays[10], - Alert: Grays[10], - Highlight: Blues[500], - Warning: Grays[975], - Accent: Grays[10], + Default: Grays['975'], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['500'], + Warning: Grays['975'], + Accent: Grays['10'], }, Border: { - Default: Grays[975], - Active: Greens[400], - Alert: Reds[500], - Highlight: Blues[500], - Warning: Reds[300], - Accent: Blues[500], + Default: Grays['400'], + Active: Blues['500'], + Alert: Reds['500'], + Highlight: Blues['500'], + Warning: Oranges['500'], + Accent: Blues['500'], }, Fill: { - Default: Layer[1].Fill, - Active: Greens[500], - Alert: Reds[500], - Highlight: Layer[1].Fill, - Warning: Reds[300], - Accent: Blues[500], + Default: Layer['1'].Fill, + Active: Greens['500'], + Alert: Reds['500'], + Highlight: Layer['1'].Fill, + Warning: Yellows['500'], + Accent: Blues['500'], }, }, } as const @@ -493,95 +547,108 @@ function createDarkInvertedSurfaces() { function createChadInvertedSurfaces() { const Text = { - Primary: Grays[50], - Secondary: Grays[300], - Tertiary: Grays[400], - Disabled: Grays[500], - Highlight: Violets[400], Feedback: { - Success: Greens[500], - Warning: Reds[300], - Error: Reds[500], - Inverted: Grays[950], + Warning: Yellows['500'], + Success: Greens['500'], + Error: Reds['500'], }, FilledFeedback: { - Info: { - Primary: Blues[300], - Secondary: Grays[300], + info: { + primary: Grays['950'], + secondary: Grays['700'], }, - Highlight: { - Primary: Blues[500], - Secondary: Grays[700], + highlight: { + primary: Grays['950'], + secondary: Grays['700'], }, - Warning: { - Primary: Grays[50], - Secondary: Grays[150], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays[50], - Secondary: Grays[150], + alert: { + primary: Grays['950'], + secondary: Grays['700'], }, - Success: { - Primary: Grays[950], - Secondary: Grays[700], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, + Primary: Grays['50'], + Secondary: Grays['300'], + Tertiary: Grays['400'], + Disabled: Grays['500'], + Highlight: Violets['400'], } as const + const Layer = { '1': { - Fill: Violets[950], - Outline: Violets[800], + Fill: Violets['950'], + Outline: Violets['800'], }, '2': { - Fill: Violets[800], - Outline: Violets[600], + Fill: Violets['800'], + Outline: Violets['600'], }, '3': { - Fill: Violets[700], - Outline: Violets[500], - }, - Highlight: Violets[400], - TypeAction: { - Selected: Violets[800], - Hover: Violets[900], + Fill: Violets['700'], + Outline: Violets['500'], }, Feedback: { - Info: Grays[850], - Success: Greens[300], - Warning: Reds[400], - Error: Reds[500], + Info: Grays['850'], + Success: Greens['300'], + Warning: Oranges['500'], + Error: Reds['500'], }, + TypeAction: { + Selected: Violets['900'], + Hover: Violets['800'], + }, + Highlight: Violets['950'], } as const + return { - Text: Text, - Layer: Layer, + Text, + Layer, Tables: { - Header: { Fill: Violets[800] }, + Row: { + Default: Layer['1'].Fill, + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + }, + Header: { + Fill: Layer['3'].Fill, + 'Label_&_Icon': { + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, + }, + }, }, Badges: { Label: { Default: Text.Primary, - Active: Grays[10], - Alert: Grays[10], - Highlight: Violets[200], - Warning: Grays[975], - Accent: Grays[10], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Violets['200'], + Warning: Grays['975'], + Accent: Grays['10'], }, Border: { - Default: Grays[600], - Active: Greens[500], - Alert: Reds[500], - Highlight: Violets[200], - Warning: Reds[300], - Accent: Violets[400], + Default: Grays['600'], + Active: Violets['400'], + Alert: Reds['500'], + Highlight: Violets['200'], + Warning: Oranges['500'], + Accent: Violets['400'], }, Fill: { - Default: Layer[1].Fill, - Active: Greens[500], - Alert: Reds[500], - Highlight: Layer[1].Fill, - Warning: Reds[300], - Accent: Violets[400], + Default: Layer['1'].Fill, + Active: Greens['500'], + Alert: Reds['500'], + Highlight: Layer['1'].Fill, + Warning: Yellows['500'], + Accent: Violets['400'], }, }, } as const diff --git a/packages/curve-ui-kit/src/themes/design/2_theme.ts b/packages/curve-ui-kit/src/themes/design/2_theme.ts index f0e93f782..d83aaa53c 100644 --- a/packages/curve-ui-kit/src/themes/design/2_theme.ts +++ b/packages/curve-ui-kit/src/themes/design/2_theme.ts @@ -1,16 +1,13 @@ import { alpha } from '@mui/material' -import { Blues, Grays, Greens, Reds, Yellows, TransitionFunction, Violets, Oranges } from './0_primitives' +import { Blues, Grays, Greens, Reds, Yellows, Oranges, Violets, TransitionFunction } from './0_primitives' import { SurfacesAndText } from './1_surfaces_text' const { plain, inverted } = SurfacesAndText const Transition = `all ${TransitionFunction}` -const InsetOverline = '0 0 auto' as const // Top border only -const InsetUnderline = 'auto 0 0' as const // Bottom border only +const InsetOverline = '0 0 auto' as const +const InsetUnderline = 'auto 0 0' as const -/** - Same background colors accross all themes -*/ const SliderBackground = { Safe: { 25: Reds[400], @@ -34,313 +31,402 @@ const SliderBackground = { export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Light) => { const Color = { - Neutral: Grays, - Primary: Blues, - Secondary: Greens, - Tertiary: Reds, - } as const - + Neutral: { + '25': Grays['25'], + '50': Grays['50'], + '75': Grays['75'], + '100': Grays['100'], + '150': Grays['150'], + '200': Grays['200'], + '300': Grays['300'], + '400': Grays['400'], + '500': Grays['500'], + '600': Grays['600'], + '700': Grays['700'], + '750': Grays['750'], + '800': Grays['800'], + '850': Grays['850'], + '900': Grays['900'], + '950': Grays['950'], + '975': Grays['975'], + }, + Primary: { + '50': Blues['50'], + '100': Blues['100'], + '200': Blues['200'], + '300': Blues['300'], + '400': Blues['400'], + '500': Blues['500'], + '600': Blues['600'], + '700': Blues['700'], + '800': Blues['800'], + '900': Blues['900'], + '950': Blues['950'], + }, + Secondary: { + '100': Greens['100'], + '200': Greens['200'], + '300': Greens['300'], + '400': Greens['400'], + '500': Greens['500'], + '600': Greens['600'], + '700': Greens['700'], + '800': Greens['800'], + }, + Tertiary: { + '200': Reds['200'], + '300': Yellows['500'], + '400': Oranges['500'], + '600': Reds['500'], + }, + } as const const Layer = { - '1': Light.Layer[1], - '2': Light.Layer[2], - '3': Light.Layer[3], - App: { - Background: '#f0edeb', - }, - Highlight: { - Fill: Light.Layer.Highlight, - Outline: Light.Layer.Highlight, - }, - TypeAction: Light.Layer.TypeAction, - Feedback: Light.Layer.Feedback, - } as const - - const Text = { - TextColors: { - Primary: Light.Text.Primary, - Secondary: Light.Text.Secondary, - Tertiary: Light.Text.Tertiary, - Highlight: Light.Text.Highlight, - Disabled: Light.Text.Disabled, - Feedback: Light.Text.Feedback, - FilledFeedback: { ...Light.Text.FilledFeedback }, - }, - FontFamily: { - Heading: 'Mona Sans', - Body: 'Mona Sans', - Mono: 'Mona Sans', - Button: 'Mona Sans', - }, - } as const - - const Button = { - Focus_Outline: Color.Primary[500], - Transition, - Primary: { - Default: { - Label: Grays[50], - Fill: Blues[500], + '1': { + Fill: Light.Layer['1'].Fill, + Outline: Light.Layer['1'].Outline, }, - Hover: { - Label: Grays[50], - Fill: Grays[900], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Color.Primary[100], - }, - }, - Secondary: { - Default: { - Label: Grays[50], - Fill: Grays[900], - }, - Hover: { - Label: Grays[50], - Fill: Blues[500], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Color.Neutral[600], - }, - }, - Outlined: { - Default: { - Label: Grays[950], - Outline: Grays[300], + '2': { + Fill: Light.Layer['2'].Fill, + Outline: Light.Layer['2'].Outline, }, - Hover: { - Label: Blues[500], - Outline: Blues[500], + '3': { + Fill: Light.Layer['3'].Fill, + Outline: Light.Layer['3'].Outline, }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Text.TextColors.Disabled, + App: { + Background: '#f0edeb', }, - }, - Ghost: { - Default: { - Label: Text.TextColors.Highlight, + Feedback: { + Informational: Light.Layer.Feedback.Info, + Success: Light.Layer.Feedback.Success, + Warning: Light.Layer.Feedback.Warning, + Error: Light.Layer.Feedback.Error, }, - Hover: { - Label: Grays[975], + TypeAction: { + Selected: Light.Layer.TypeAction.Selected, + Hover: Light.Layer.TypeAction.Hover, }, - Disabled: { - Label: Text.TextColors.Disabled, + Highlight: { + Fill: Light.Layer.Highlight, + Outline: Blues['500'], }, - }, - Success: { - Default: { - Label: Grays[900], - Fill: Greens[400], + } as const + const Text = { + TextColors: { + Primary: Light.Text.Primary, + Secondary: Light.Text.Secondary, + Tertiary: Light.Text.Tertiary, + Highlight: Light.Text.Highlight, + Disabled: Light.Text.Disabled, + FilledFeedback: { + Info: { + Primary: Light.Text.FilledFeedback.info.primary, + Secondary: Light.Text.FilledFeedback.info.secondary, + }, + Highlight: { + Primary: Light.Text.FilledFeedback.highlight.primary, + Secondary: Light.Text.FilledFeedback.highlight.secondary, + }, + Warning: { + Primary: Light.Text.FilledFeedback.warning.primary, + Secondary: Light.Text.FilledFeedback.warning.secondary, + }, + Alert: { + Primary: Light.Text.FilledFeedback.alert.primary, + Secondary: Light.Text.FilledFeedback.alert.secondary, + }, + Success: { + Primary: Light.Text.FilledFeedback.success.primary, + Secondary: Light.Text.FilledFeedback.success.secondary, + }, + }, + Feedback: { + Success: Light.Text.Feedback.Success, + Warning: Light.Text.Feedback.Warning, + Error: Light.Text.Feedback.Error, + }, }, - Hover: { - Label: Greens[300], - Fill: Grays[900], + FontFamily: { + Heading: 'Mona Sans', + Body: 'Mona Sans', + Mono: 'Mona Sans', + Button: 'Mona Sans', }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Greens[600], + } as const + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Blues['500'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, + Primary: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Blues['500'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Light.Text.Disabled, + Fill: Blues['100'], + }, }, - }, - Error: { - Default: { - Label: Grays[50], - Fill: Reds[500], + Secondary: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Blues['500'], + }, + Disabled: { + 'Label_&_Icon': Light.Text.Disabled, + Fill: Grays['600'], + }, }, - Hover: { - Label: Reds[400], - Fill: Grays[900], + Outlined: { + Default: { + 'Label_&_Icon': Grays['950'], + Outline: Grays['300'], + }, + Hover: { + 'Label_&_Icon': Blues['500'], + Outline: Blues['500'], + }, + Disabled: { + 'Label_&_Icon': Light.Text.Disabled, + Outline: Light.Text.Disabled, + }, }, - Disabled: { - Label: Grays[300], - Fill: Reds[700], + Ghost: { + Default: { + 'Label_&_Icon': Light.Text.Highlight, + }, + Hover: { + 'Label_&_Icon': Grays['975'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Light.Text.Disabled, + Fill: Grays['500'], + }, }, - }, - Navigation: { - Default: { - Label: Text.TextColors.Secondary, + Success: { + Default: { + 'Label_&_Icon': Grays['900'], + Fill: Greens['400'], + }, + Hover: { + 'Label_&_Icon': Greens['300'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Light.Text.Disabled, + Fill: Greens['600'], + }, }, - Hover: { - Label: Text.TextColors.Primary, - Fill: Layer[1].Fill, + Error: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Reds['500'], + }, + Hover: { + 'Label_&_Icon': Oranges['500'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Grays['300'], + Fill: Reds['700'], + }, }, - Current: { - Label: Grays[50], - Fill: Layer.Highlight.Fill, + Navigation: { + Default: { + 'Label_&_Icon': Light.Text.Tertiary, + }, + Hover: { + 'Label_&_Icon': Light.Text.Primary, + 'Label_&_Icon_2': Light.Text.Primary, + Fill: Light.Layer['1'].Fill, + }, + Current: { + 'Label_&_Icon': Grays['50'], + Fill: Light.Layer.Highlight, + }, }, - }, - } as const - + } as const const Tabs = { - Transition, - UnderLined: { - Inset: InsetUnderline, - Default: { - Label: Text.TextColors.Secondary, - Outline: Color.Neutral[200], + UnderLined: { + Container_Border: Light.Layer['1'].Outline, + Default: { + 'Label_&_Icon': Light.Text.Secondary, + Outline: Light.Layer['2'].Outline, + }, + Hover: { + 'Label_&_Icon': Light.Text.Highlight, + Outline: Blues['500'], + }, + Current: { + 'Label_&_Icon': Light.Text.Primary, + Outline: Blues['500'], + }, }, - Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Contained: { + Default: { + 'Label_&_Icon': Light.Text.Secondary, + Fill: Grays['300'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], + }, + Current: { + 'Label_&_Icon': Light.Text.Primary, + Fill: Light.Layer['1'].Fill, + Outline: Blues['500'], + }, }, - Current: { - Label: Text.TextColors.Primary, - Outline: Color.Primary[500], + OverLined: { + Default: { + 'Label_&_Icon': Light.Text.Secondary, + Outline: Light.Layer['2'].Outline, + }, + Hover: { + 'Label_&_Icon': Light.Text.Primary, + Outline: Grays['500'], + }, + Current: { + 'Label_&_Icon': Light.Text.Primary, + Outline: Blues['500'], + }, }, - }, - Contained: { + } as const + const Chips = { Default: { - Label: Text.TextColors.Secondary, - Fill: Color.Neutral[300], + 'Label_&_Icon': Light.Text.Secondary, + Fill: Light.Layer['2'].Fill, + Stroke: Light.Badges.Border.Default, }, Hover: { - Label: Color.Neutral[50], - Fill: Color.Neutral[900], + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], }, Current: { - Label: Text.TextColors.Primary, - Fill: Layer[1].Fill, - Outline: Color.Primary[500], + 'Label_&_Icon': Light.Text.Highlight, + Fill: Light.Layer['2'].Fill, + Outline: Blues['500'], }, - }, - OverLined: { - Inset: InsetOverline, + } as const + const Badges = { + Border: { + Default: Light.Badges.Border.Default, + Active: Light.Badges.Border.Active, + Alert: Light.Badges.Border.Alert, + Highlight: Light.Badges.Border.Highlight, + Warning: Light.Badges.Border.Warning, + Accent: Light.Badges.Border.Accent, + }, + Label: { + Default: Light.Badges.Label.Default, + Active: Light.Badges.Label.Active, + Alert: Light.Badges.Label.Alert, + Highlight: Light.Badges.Label.Highlight, + Warning: Light.Badges.Label.Warning, + Accent: Light.Badges.Label.Accent, + }, + Fill: { + Default: Light.Badges.Fill.Default, + Active: Light.Badges.Fill.Active, + Alert: Light.Badges.Fill.Alert, + Highlight: Light.Badges.Fill.Highlight, + Warning: Light.Badges.Fill.Warning, + Accent: Light.Badges.Fill.Accent, + }, + } as const + const Chart = { + Liquidation_Zone: { + Current: Yellows['400'], + Future: Blues['200'], + }, + Candles: { + Positive: Greens['400'], + Negative: Reds['600'], + }, + Lines: { + Positive: Greens['400'], + Negative: Reds['600'], + Line_1: Blues['500'], + Line_2: Yellows['500'], + Line_3: Greens['500'], + }, + } as const + const Toggles = { Default: { - Label: Text.TextColors.Secondary, - Outline: Color.Neutral[200], + 'Label_&_Icon': Light.Text.Primary, + Fill: Grays['100'], }, Hover: { - Label: Text.TextColors.Primary, - Fill: Color.Neutral[200], - Outline: Color.Neutral[500], + 'Label_&_Icon': Light.Text.Highlight, + Fill: Light.Layer['3'].Fill, }, Current: { - Label: Text.TextColors.Primary, - Outline: Color.Primary[500], + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], }, - }, - } as const - - const Chips = { - BorderRadius: { - Clickable: 0, - NonClickable: '100px', - }, - Default: { - Label: Text.TextColors.Secondary, - Fill: Layer[1].Fill, - Stroke: Layer[2].Outline, - }, - Hover: { - Label: Color.Neutral[50], - Fill: Color.Neutral[900], - }, - Current: { - Label: Text.TextColors.Highlight, - Fill: Layer[2].Fill, - Outline: Layer.Highlight.Outline, - }, - } as const - - const Badges = { - Label: { - Default: Light.Badges.Label.Default, - Active: Light.Badges.Label.Active, - Alert: Light.Badges.Label.Alert, - Highlight: Light.Badges.Label.Highlight, - Warning: Light.Badges.Label.Warning, - Accent: Light.Badges.Label.Accent, - }, - Border: { - Default: Light.Badges.Border.Default, - Active: Light.Badges.Border.Active, - Alert: Light.Badges.Border.Alert, - Highlight: Light.Badges.Border.Highlight, - Warning: Light.Badges.Border.Warning, - Accent: Light.Badges.Border.Accent, - }, - Fill: { - Default: Light.Badges.Fill.Default, - Active: Light.Badges.Fill.Active, - Alert: Light.Badges.Fill.Alert, - Highlight: Light.Badges.Fill.Highlight, - Warning: Light.Badges.Fill.Warning, - Accent: Light.Badges.Fill.Accent, - }, - } as const - - const Chart = { - LiquidationZone: { - Current: Yellows[400], - Future: Blues[200], - }, - Candles: { - Positive: Greens[400], - Negative: Reds[600], - }, - Lines: { - Positive: Greens[400], - Negative: Reds[600], - Line1: Color.Primary[400], - Line2: Yellows[500], - Line3: Color.Secondary[500], - }, - } as const - - const Toggles = { - Default: { - Label: Text.TextColors.Primary, - Fill: Color.Neutral[100], - }, - Hover: { - Label: Text.TextColors.Highlight, - Fill: Layer[3].Fill, - }, - Current: { - Label: Grays[50], - Fill: Color.Neutral[900], - }, - } as const - + } as const const Table = { - Header: { Fill: Light.Tables.Header.Fill }, - Row: { - Default: Light.Layer[1].Fill, - Selected: Light.Layer.TypeAction.Selected, - Hover: Light.Layer.TypeAction.Hover, - }, - } as const - - const InputBaseDefaultFill = Grays[100] - const Inputs = { - Base: { - Default: { - Fill: InputBaseDefaultFill, - Border: { - Default: Grays[200], - Active: Light.Text.Highlight, - Filled: Grays[850], - Error: Reds[500], + Header: { + Fill: Light.Tables.Header.Fill, + 'Label_&_icon': { + Default: Light.Tables.Header['Label_&_Icon'].Default, + Hover: Light.Tables.Header['Label_&_Icon'].Hover, + Active: Light.Tables.Header['Label_&_Icon'].Active, }, }, - Nested: { - Nested: Grays[10], - Fill: Grays[100], - Border: { - Default: Grays[400], - Active: Light.Text.Highlight, - Filled: Grays[850], - Error: Reds[500], + Row: { + Default: Light.Tables.Row.Default, + Selected: Light.Tables.Row.Selected, + Hover: Light.Tables.Row.Hover, + }, + } as const + const InputBaseDefaultFill = Grays['100'] + const Inputs = { + Base: { + Default: { + Fill: { + Default: Grays['100'], + Active: Grays['50'], + }, + Border: { + Default: Grays['200'], + Active: Light.Text.Highlight, + Filled: Grays['850'], + Error: Reds['500'], + }, + }, + Nested: { + Nested: Grays['10'], + Fill: Grays['100'], + Border: { + Default: Grays['400'], + Active: Light.Text.Highlight, + Filled: Grays['850'], + Error: Reds['500'], + }, }, }, - }, - Large: { - Default: { - Fill: InputBaseDefaultFill, + Large: { + Default: { + Fill: Grays['100'], + Outline: Grays['200'], + }, }, - }, - } as const + } as const const Sliders = { default: { @@ -353,7 +439,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - + const Switch = { Default: { Fill: Layer[1].Fill, @@ -363,10 +449,10 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], - Label: Grays[50], + Label: Grays[50], }, } as const - + return { theme: 'light', Color, @@ -386,371 +472,403 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li } export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) => { - const color = Grays const Color = { - Neutral: { - '25': color[975], - '50': color[950], - '75': color[900], - '100': color[850], - '150': color[800], - '200': color[750], - '300': color[700], - '400': color[600], - '500': color[500], - '600': color[400], - '700': color[300], - '750': color[200], - '800': color[150], - '850': color[100], - '900': color[75], - '950': color[50], - '975': color[25], - }, - Primary: { - '50': Blues[950], - '100': Blues[900], - '200': Blues[800], - '300': Blues[700], - '400': Blues[600], - '500': Blues[500], - '600': Blues[400], - '700': Blues[300], - '800': Blues[200], - '900': Blues[100], - '950': Blues[50], - }, - Secondary: { - '100': Greens[800], - '200': Greens[700], - '300': Greens[600], - '400': Greens[500], - '500': Greens[400], - '600': Greens[300], - '700': Greens[200], - '800': Greens[100], - }, - Tertiary: { - '200': Reds[500], - '300': Reds[400], - '400': Reds[300], - '600': Reds[200], - }, - } as const - + Neutral: { + '25': Grays['975'], + '50': Grays['950'], + '75': Grays['900'], + '100': Grays['850'], + '150': Grays['800'], + '200': Grays['750'], + '300': Grays['700'], + '400': Grays['600'], + '500': Grays['500'], + '600': Grays['400'], + '700': Grays['300'], + '750': Grays['200'], + '800': Grays['150'], + '850': Grays['100'], + '900': Grays['75'], + '950': Grays['50'], + '975': Grays['25'], + }, + Primary: { + '50': Blues['950'], + '100': Blues['900'], + '200': Blues['800'], + '300': Blues['700'], + '400': Blues['600'], + '500': Blues['500'], + '600': Blues['400'], + '700': Blues['300'], + '800': Blues['200'], + '900': Blues['100'], + '950': Blues['50'], + }, + Secondary: { + '100': Greens['800'], + '200': Greens['700'], + '300': Greens['600'], + '400': Greens['500'], + '500': Greens['400'], + '600': Greens['300'], + '700': Greens['200'], + '800': Greens['100'], + }, + Tertiary: { + '200': Reds['800'], + '300': Oranges['500'], + '400': Yellows['500'], + '600': Yellows['400'], + }, + } as const const Layer = { - '1': { - Fill: Dark.Layer[1].Fill, - Outline: Dark.Layer[1].Outline, - }, - '2': { - Fill: Dark.Layer[2].Fill, - Outline: Dark.Layer[2].Outline, - }, - '3': { - Fill: Dark.Layer[3].Fill, - Outline: Dark.Layer[3].Outline, - }, - App: { - Background: '#12110f', - }, - Highlight: { - Fill: Dark.Layer.Highlight, - Outline: Dark.Layer.Highlight, - }, - TypeAction: { - Hover: Dark.Layer.TypeAction.Hover, - Selected: Dark.Layer.TypeAction.Selected, - }, - Feedback: Dark.Layer.Feedback, - } as const - - const Text = { - TextColors: { - Primary: Dark.Text.Primary, - Secondary: Dark.Text.Secondary, - Tertiary: Dark.Text.Tertiary, - Highlight: Dark.Text.Highlight, - Disabled: Dark.Text.Disabled, - Feedback: Dark.Text.Feedback, - FilledFeedback: { ...Dark.Text.FilledFeedback }, - }, - FontFamily: { - Heading: 'Mona Sans', - Body: 'Mona Sans', - Mono: 'Mona Sans', - Button: 'Mona Sans', - }, - } as const - - const Button = { - Focus_Outline: Color.Primary[500], - Transition, - Primary: { - Default: { - Label: color[50], - Fill: Blues[500], + '1': { + Fill: Dark.Layer['1'].Fill, + Outline: Dark.Layer['1'].Outline, }, - Hover: { - Label: color[900], - Fill: color[50], + '2': { + Fill: Dark.Layer['2'].Fill, + Outline: Dark.Layer['2'].Outline, }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Color.Primary[800], + '3': { + Fill: Dark.Layer['3'].Fill, + Outline: Dark.Layer['3'].Outline, }, - }, - Secondary: { - Default: { - Label: color[900], - Fill: color[50], + App: { + Background: '#12110f', }, - Hover: { - Label: color[900], - Fill: Blues[500], + Feedback: { + Informational: Dark.Layer.Feedback.Info, + Success: Dark.Layer.Feedback.Success, + Warning: Dark.Layer.Feedback.Warning, + Error: Dark.Layer.Feedback.Error, }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Color.Neutral[600], + TypeAction: { + Selected: Dark.Layer.TypeAction.Selected, + Hover: Dark.Layer.TypeAction.Hover, }, - }, - Outlined: { - Default: { - Label: color[50], - Outline: color[700], - }, - Hover: { - Label: Blues[500], - Outline: Blues[500], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Text.TextColors.Disabled, - }, - }, - Ghost: { - Default: { - Label: Color.Primary[700], + Highlight: { + Fill: Dark.Layer.Highlight, + Outline: Blues['500'], }, - Hover: { - Label: color[50], - }, - Disabled: { - Label: Text.TextColors.Disabled, - }, - }, - Success: { - Default: { - Label: color[900], - Fill: Greens[300], + } as const + const Text = { + TextColors: { + Primary: Dark.Text.primary, + Secondary: Dark.Text.secondary, + Tertiary: Dark.Text.tertiary, + Highlight: Dark.Text.highlight, + Disabled: Dark.Text.Disabled, + FilledFeedback: { + Info: { + Primary: Dark.Text.FilledFeedback.info.primary, + Secondary: Dark.Text.FilledFeedback.info.secondary, + }, + Highlight: { + Primary: Dark.Text.FilledFeedback.highlight.primary, + Secondary: Dark.Text.FilledFeedback.highlight.secondary, + }, + Warning: { + Primary: Dark.Text.FilledFeedback.warning.primary, + Secondary: Dark.Text.FilledFeedback.warning.secondary, + }, + Alert: { + Primary: Dark.Text.FilledFeedback.alert.primary, + Secondary: Dark.Text.FilledFeedback.alert.secondary, + }, + Success: { + Primary: Dark.Text.FilledFeedback.success.primary, + Secondary: Dark.Text.FilledFeedback.success.secondary, + }, + }, + Feedback: { + Success: Dark.Text.Feedback.Success, + Warning: Dark.Text.Feedback.Warning, + Error: Dark.Text.Feedback.Error, + }, }, - Hover: { - Label: Greens[500], - Fill: color[50], + FontFamily: { + Heading: 'Mona Sans', + Body: 'Mona Sans', + Mono: 'Mona Sans', + Button: 'Mona Sans', }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Greens[600], + } as const + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Blues['500'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, + Primary: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Blues['500'], + }, + Hover: { + 'Label_&_Icon': Grays['900'], + Fill: Grays['50'], + }, + Disabled: { + 'Label_&_Icon': Dark.Text.Disabled, + Fill: Blues['200'], + }, }, - }, - Error: { - Default: { - Label: color[50], - Fill: Reds[500], + Secondary: { + Default: { + 'Label_&_Icon': Grays['900'], + Fill: Grays['50'], + }, + Hover: { + 'Label_&_Icon': Grays['900'], + Fill: Blues['500'], + }, + Disabled: { + 'Label_&_Icon': Dark.Text.Disabled, + Fill: Grays['400'], + }, }, - Hover: { - Label: Reds[400], - Fill: color[900], + Outlined: { + Default: { + 'Label_&_Icon': Grays['50'], + Outline: Grays['700'], + }, + Hover: { + 'Label_&_Icon': Blues['500'], + Outline: Blues['500'], + }, + Disabled: { + 'Label_&_Icon': Dark.Text.Disabled, + Outline: Dark.Text.Disabled, + }, }, - Disabled: { - Label: color[300], - Fill: Reds[700], + Ghost: { + Default: { + 'Label_&_Icon': Blues['300'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Grays['50'], + }, + Disabled: { + 'Label_&_Icon': Dark.Text.Disabled, + Fill: Grays['850'], + }, }, - }, - Navigation: { - Default: { - Label: Text.TextColors.Secondary, + Success: { + Default: { + 'Label_&_Icon': Grays['900'], + Fill: Greens['300'], + }, + Hover: { + 'Label_&_Icon': Greens['500'], + Fill: Grays['50'], + }, + Disabled: { + 'Label_&_Icon': Dark.Text.Disabled, + Fill: Greens['600'], + }, }, - Hover: { - Label: Text.TextColors.Primary, - Fill: Layer[1].Fill, + Error: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Reds['500'], + }, + Hover: { + 'Label_&_Icon': Oranges['500'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Grays['300'], + Fill: Reds['700'], + }, }, - Current: { - Label: color[50], - Fill: Layer.Highlight.Fill, + Navigation: { + Default: { + 'Label_&_Icon': Dark.Text.tertiary, + }, + Hover: { + 'Label_&_Icon': Dark.Text.primary, + 'Label_&_Icon_2': Dark.Text.primary, + Fill: Dark.Layer['1'].Fill, + }, + Current: { + 'Label_&_Icon': Grays['50'], + Fill: Dark.Layer.Highlight, + }, }, - }, - } as const - + } as const const Tabs = { - Transition, - UnderLined: { - Inset: InsetUnderline, - Default: { - Label: Text.TextColors.Secondary, - Outline: Color.Neutral[200], + UnderLined: { + Container_Border: Dark.Layer['1'].Outline, + Default: { + 'Label_&_Icon': Dark.Text.secondary, + Outline: Dark.Layer['2'].Outline, + }, + Hover: { + 'Label_&_Icon': Dark.Text.highlight, + Outline: Blues['500'], + }, + Current: { + 'Label_&_Icon': Dark.Text.primary, + Outline: Blues['500'], + }, }, - Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Contained: { + Default: { + 'Label_&_Icon': Dark.Text.secondary, + Fill: Grays['750'], + }, + Hover: { + 'Label_&_Icon': Grays['950'], + Fill: Grays['75'], + }, + Current: { + 'Label_&_Icon': Dark.Text.primary, + Fill: Dark.Layer['1'].Fill, + Outline: Blues['500'], + }, }, - Current: { - Label: Text.TextColors.Primary, - Outline: Color.Primary[500], + OverLined: { + Default: { + 'Label_&_Icon': Dark.Text.secondary, + Outline: Dark.Layer['2'].Outline, + }, + Hover: { + 'Label_&_Icon': Dark.Text.primary, + Outline: Grays['500'], + }, + Current: { + 'Label_&_Icon': Dark.Text.primary, + Outline: Blues['500'], + }, }, - }, - Contained: { + } as const + const Chips = { Default: { - Label: Text.TextColors.Secondary, - Fill: Color.Neutral[200], + 'Label_&_Icon': Dark.Text.primary, + Fill: Dark.Layer['2'].Fill, + Stroke: Dark.Badges.Border.Default, }, Hover: { - Label: Color.Neutral[50], - Fill: Color.Neutral[900], + 'Label_&_Icon': Grays['950'], + Fill: Grays['75'], }, Current: { - Label: Text.TextColors.Primary, - Fill: Layer[1].Fill, - Outline: Color.Primary[500], + 'Label_&_Icon': Text.TextColors.Highlight, + Fill: Dark.Layer['2'].Fill, + Outline: Blues['500'], }, - }, - OverLined: { - Inset: InsetOverline, + } as const + const Badges = { + Border: { + Default: Dark.Badges.Border.Default, + Active: Dark.Badges.Border.Active, + Alert: Dark.Badges.Border.Alert, + Highlight: Dark.Badges.Border.Highlight, + Warning: Dark.Badges.Border.Warning, + Accent: Dark.Badges.Border.Accent, + }, + Label: { + Default: Dark.Badges.Label.Default, + Active: Dark.Badges.Label.Active, + Alert: Dark.Badges.Label.Alert, + Highlight: Dark.Badges.Label.Highlight, + Warning: Dark.Badges.Label.Warning, + Accent: Dark.Badges.Label.Accent, + }, + Fill: { + Default: Dark.Badges.Fill.Default, + Active: Dark.Badges.Fill.Active, + Alert: Dark.Badges.Fill.Alert, + Highlight: Dark.Badges.Fill.Highlight, + Warning: Dark.Badges.Fill.Warning, + Accent: Dark.Badges.Fill.Accent, + }, + } as const + const Chart = { + Liquidation_Zone: { + Current: Oranges['950'], + Future: Blues['800'], + }, + Candles: { + Positive: Greens['300'], + Negative: Reds['500'], + }, + Lines: { + Positive: Greens['300'], + Negative: Reds['500'], + Line_1: Blues['500'], + Line_2: Yellows['500'], + Line_3: Greens['400'], + }, + } as const + const Toggles = { Default: { - Label: Text.TextColors.Secondary, - Outline: Color.Neutral[200], + 'Label_&_Icon': Dark.Text.primary, + Fill: Grays['850'], }, Hover: { - Label: Text.TextColors.Primary, - Fill: Color.Neutral[200], - Outline: Color.Neutral[500], + 'Label_&_Icon': Dark.Text.highlight, + Fill: Dark.Layer['3'].Fill, }, Current: { - Label: Text.TextColors.Primary, - Outline: Color.Primary[500], + 'Label_&_Icon': Grays['950'], + Fill: Grays['50'], }, - }, - } as const - - const Chips = { - BorderRadius: { - Clickable: 0, - NonClickable: '100px', - }, - Default: { - Label: Text.TextColors.Secondary, - Fill: Layer[1].Fill, - Stroke: Layer[2].Outline, - }, - Hover: { - Label: Color.Neutral[50], - Fill: Color.Neutral[900], - }, - Current: { - Label: Color.Neutral[950], - Fill: Layer[2].Fill, - Outline: Layer.Highlight.Outline, - }, - } as const - - const Badges = { - Label: { - Default: Dark.Badges.Label.Default, - Active: Dark.Badges.Label.Active, - Alert: Dark.Badges.Label.Alert, - Highlight: Dark.Badges.Label.Highlight, - Warning: Dark.Badges.Label.Warning, - Accent: Dark.Badges.Label.Accent, - }, - Border: { - Default: Dark.Badges.Border.Default, - Active: Dark.Badges.Border.Active, - Alert: Dark.Badges.Border.Alert, - Highlight: Dark.Badges.Border.Highlight, - Warning: Dark.Badges.Border.Warning, - Accent: Dark.Badges.Border.Accent, - }, - Fill: { - Default: Dark.Badges.Fill.Default, - Active: Dark.Badges.Fill.Active, - Alert: Dark.Badges.Fill.Alert, - Highlight: Dark.Badges.Fill.Highlight, - Warning: Dark.Badges.Fill.Warning, - Accent: Dark.Badges.Fill.Accent, - }, - } as const - - const Chart = { - LiquidationZone: { - Current: Oranges[950], - Future: Blues[800], - }, - Candles: { - Positive: Greens[300], - Negative: Reds[500], - }, - Lines: { - Positive: Greens[300], - Negative: Reds[500], - Line1: Color.Primary[400], - Line2: Yellows[500], - Line3: Color.Secondary[500], - }, - } as const - - const Toggles = { - Default: { - Label: Text.TextColors.Primary, - Fill: Color.Neutral[100], - }, - Hover: { - Label: Text.TextColors.Highlight, - Fill: Layer[3].Fill, - }, - Current: { - Label: Color.Neutral[50], - Fill: Color.Neutral[950], - }, - } as const - + } as const const Table = { - Header: { Fill: Dark.Tables.Header.Fill }, - Row: { - Default: Dark.Layer[1].Fill, - Selected: Dark.Layer.TypeAction.Selected, - Hover: Dark.Layer.TypeAction.Hover, - }, - } as const - - const InputBaseDefaultFill = color[900] - const Inputs = { - Base: { - Default: { - Fill: InputBaseDefaultFill, - Border: { - Default: color[800], - Active: Dark.Text.Highlight, - Filled: color[75], - Error: Reds[500], + Header: { + Fill: Dark.Tables.Header.Fill, + 'Label_&_icon': { + Default: Dark.Tables.Header['Label_&_Icon'].Default, + Hover: Dark.Tables.Header['Label_&_Icon'].Hover, + Active: Dark.Tables.Header['Label_&_Icon'].Active, }, }, - Nested: { - Nested: color[850], - Fill: color[850], - Border: { - Default: color[600], - Active: Dark.Text.Highlight, - Filled: color[75], - Error: Reds[500], + Row: { + Default: Dark.Tables.Row.Default, + Selected: Dark.Tables.Row.Selected, + Hover: Dark.Tables.Row.Hover, + }, + } as const + const InputBaseDefaultFill = Grays['900'] + const Inputs = { + Base: { + Default: { + Fill: { + Default: Grays['900'], + Active: Grays['900'], + }, + Border: { + Default: Grays['800'], + Active: Dark.Text.highlight, + Filled: Grays['75'], + Error: Reds['500'], + }, + }, + Nested: { + Nested: Grays['850'], + Fill: Grays['850'], + Border: { + Default: Grays['600'], + Active: Dark.Text.highlight, + Filled: Grays['75'], + Error: Reds['500'], + }, }, }, - }, - Large: { - Default: { - Fill: InputBaseDefaultFill, + Large: { + Default: { + Fill: Grays['900'], + Outline: Grays['800'], + }, }, - }, - } as const + } as const const Sliders = { default: { @@ -763,7 +881,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - + const Switch = { Default: { Fill: Layer[1].Fill, @@ -773,10 +891,10 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], - Label: color[50], + Label: Grays[50], }, } as const - + return { theme: 'dark', Color, @@ -797,313 +915,402 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) => { const Color = { - Neutral: Grays, - Primary: Violets, - Secondary: Greens, - Tertiary: Reds, - } as const - + Neutral: { + '25': Grays['25'], + '50': Grays['50'], + '75': Grays['75'], + '100': Grays['100'], + '150': Grays['150'], + '200': Grays['200'], + '300': Grays['300'], + '400': Grays['400'], + '500': Grays['500'], + '600': Grays['600'], + '700': Grays['700'], + '750': Grays['750'], + '800': Grays['800'], + '850': Grays['850'], + '900': Grays['900'], + '950': Grays['950'], + '975': Grays['975'], + }, + Primary: { + '50': Violets['50'], + '100': Violets['100'], + '200': Violets['200'], + '300': Violets['300'], + '400': Violets['400'], + '500': Violets['500'], + '600': Violets['600'], + '700': Violets['700'], + '800': Violets['800'], + '900': Violets['900'], + '950': Violets['950'], + }, + Secondary: { + '100': Greens['100'], + '200': Greens['200'], + '300': Greens['300'], + '400': Greens['400'], + '500': Greens['500'], + '600': Greens['600'], + '700': Greens['700'], + '800': Greens['800'], + }, + Tertiary: { + '200': Reds['200'], + '300': Yellows['500'], + '400': Oranges['500'], + '600': Reds['500'], + }, + } as const const Layer = { - '1': Chad.Layer[1], - '2': Chad.Layer[2], - '3': Chad.Layer[3], - App: { - Background: '#bdbbec', - }, - Highlight: { - Fill: Chad.Layer.Highlight, - Outline: Chad.Layer.Highlight, - }, - TypeAction: Chad.Layer.TypeAction, - Feedback: Chad.Layer.Feedback, - } as const - - const Text = { - TextColors: { - Primary: Chad.Text.Primary, - Secondary: Chad.Text.Secondary, - Tertiary: Chad.Text.Tertiary, - Highlight: Chad.Text.Highlight, - Disabled: Chad.Text.Disabled, - Feedback: Chad.Text.Feedback, - FilledFeedback: { ...Chad.Text.FilledFeedback }, - }, - FontFamily: { - Heading: 'Minecraft', - Body: 'Hubot Sans', - Mono: 'Hubot Sans', - Button: 'Minecraft', - }, - } as const - - const Button = { - Focus_Outline: Color.Primary[600], - Transition, - Primary: { - Default: { - Label: Grays[50], - Fill: Violets[950], + '1': { + Fill: Chad.Layer['1'].Fill, + Outline: Chad.Layer['1'].Outline, }, - Hover: { - Label: Grays[50], - Fill: Grays[900], + '2': { + Fill: Chad.Layer['2'].Fill, + Outline: Chad.Layer['2'].Outline, }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Violets[200], + '3': { + Fill: Chad.Layer['3'].Fill, + Outline: Chad.Layer['3'].Outline, }, - }, - Secondary: { - Default: { - Label: Grays[50], - Fill: Grays[900], + App: { + Background: '#bdbbec', }, - Hover: { - Label: Grays[50], - Fill: Violets[500], + Feedback: { + Informational: Chad.Layer.Feedback.Info, + Success: Chad.Layer.Feedback.Success, + Warning: Chad.Layer.Feedback.Warning, + Error: Chad.Layer.Feedback.Error, }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Grays[600], + TypeAction: { + Selected: Chad.Layer.TypeAction.Selected, + Hover: Chad.Layer.TypeAction.Hover, }, - }, - Outlined: { - Default: { - Label: Grays[950], - Outline: Grays[300], + Highlight: { + Fill: Chad.Layer.Highlight, + Outline: Violets['500'], }, - Hover: { - Label: Violets[500], - Outline: Violets[500], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Violets[200], - }, - }, - Ghost: { - Default: { - Label: Text.TextColors.Highlight, - }, - Hover: { - Label: Grays[800], - }, - Disabled: { - Label: Text.TextColors.Disabled, - }, - }, - Success: { - Default: { - Label: Grays[900], - Fill: Greens[400], + } as const + const Text = { + TextColors: { + Primary: Chad.Text.Primary, + Secondary: Chad.Text.Secondary, + Tertiary: Chad.Text.Tertiary, + Highlight: Chad.Text.Highlight, + Disabled: Chad.Text.Disabled, + FilledFeedback: { + Info: { + Primary: Chad.Text.FilledFeedback.info.primary, + Secondary: Chad.Text.FilledFeedback.info.secondary, + }, + Highlight: { + Primary: Chad.Text.FilledFeedback.highlight.primary, + Secondary: Chad.Text.FilledFeedback.highlight.secondary, + }, + Warning: { + Primary: Chad.Text.FilledFeedback.warning.primary, + Secondary: Chad.Text.FilledFeedback.warning.secondary, + }, + Alert: { + Primary: Chad.Text.FilledFeedback.alert.primary, + Secondary: Chad.Text.FilledFeedback.alert.secondary, + }, + Success: { + Primary: Chad.Text.FilledFeedback.success.primary, + Secondary: Chad.Text.FilledFeedback.success.secondary, + }, + }, + Feedback: { + Success: Chad.Text.Feedback.Success, + Warning: Chad.Text.Feedback.Warning, + Error: Chad.Text.Feedback.Error, + }, }, - Hover: { - Label: Greens[500], - Fill: Grays[900], + FontFamily: { + Heading: 'Minecraft', + Body: 'Hubot Sans', + Mono: 'Hubot Sans', + Button: 'Minecraft', }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Greens[600], + } as const + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Violets['600'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, + Primary: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Violets['950'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Chad.Text.Disabled, + Fill: Violets['200'], + }, }, - }, - Error: { - Default: { - Label: Grays[50], - Fill: Reds[500], + Secondary: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Grays['900'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Violets['500'], + }, + Disabled: { + 'Label_&_Icon': Chad.Text.Disabled, + Fill: Grays['600'], + }, }, - Hover: { - Label: Reds[400], - Fill: Grays[900], + Outlined: { + Default: { + 'Label_&_Icon': Grays['950'], + Outline: Grays['950'], + }, + Hover: { + 'Label_&_Icon': Violets['500'], + Outline: Violets['500'], + }, + Disabled: { + 'Label_&_Icon': Chad.Text.Disabled, + Outline: Violets['200'], + }, }, - Disabled: { - Label: Grays[300], - Fill: Reds[700], + Ghost: { + Default: { + 'Label_&_Icon': Chad.Text.Highlight, + }, + Hover: { + 'Label_&_Icon': Violets['800'], + Fill: Violets['500'], + }, + Disabled: { + 'Label_&_Icon': Chad.Text.Disabled, + Fill: Violets['200'], + }, }, - }, - Navigation: { - Default: { - Label: Text.TextColors.Secondary, + Success: { + Default: { + 'Label_&_Icon': Grays['900'], + Fill: Greens['400'], + }, + Hover: { + 'Label_&_Icon': Greens['500'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Chad.Text.Disabled, + Fill: Greens['600'], + }, }, - Hover: { - Label: Text.TextColors.Primary, - Fill: Layer[1].Fill, + Error: { + Default: { + 'Label_&_Icon': Grays['50'], + Fill: Reds['500'], + }, + Hover: { + 'Label_&_Icon': Oranges['500'], + Fill: Grays['900'], + }, + Disabled: { + 'Label_&_Icon': Grays['300'], + Fill: Reds['700'], + }, }, - Current: { - Label: Grays[50], - Fill: Layer.Highlight.Fill, + Navigation: { + Default: { + 'Label_&_Icon': Chad.Text.Tertiary, + }, + Hover: { + 'Label_&_Icon': Chad.Text.Primary, + 'Label_&_Icon_2': Chad.Text.Primary, + Fill: Chad.Layer['1'].Fill, + }, + Current: { + 'Label_&_Icon': Grays['50'], + Fill: Chad.Layer.Highlight, + }, }, - }, - } as const - + } as const const Tabs = { - Transition, - UnderLined: { - Inset: InsetUnderline, - Default: { - Label: Text.TextColors.Secondary, - Outline: Color.Neutral[200], + UnderLined: { + Container_Border: Chad.Layer['1'].Outline, + Default: { + 'Label_&_Icon': Chad.Text.Secondary, + Outline: Chad.Layer['2'].Outline, + }, + Hover: { + 'Label_&_Icon': Chad.Text.Highlight, + Outline: Violets['500'], + }, + Current: { + 'Label_&_Icon': Chad.Text.Primary, + Outline: Violets['500'], + }, }, - Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Contained: { + Default: { + 'Label_&_Icon': Chad.Text.FilledFeedback.highlight.secondary, + Fill: Violets['950'], + }, + Hover: { + 'Label_&_Icon': Grays['50'], + Fill: Violets['800'], + }, + Current: { + 'Label_&_Icon': Chad.Text.Primary, + Fill: Chad.Layer['1'].Fill, + Outline: Violets['500'], + }, }, - Current: { - Label: Text.TextColors.Primary, - Outline: Color.Primary[500], + OverLined: { + Default: { + 'Label_&_Icon': Chad.Text.Secondary, + Outline: Chad.Layer['2'].Outline, + }, + Hover: { + 'Label_&_Icon': Chad.Text.Primary, + Outline: Grays['500'], + }, + Current: { + 'Label_&_Icon': Chad.Text.Primary, + Outline: Violets['500'], + }, }, - }, - Contained: { + } as const + const Chips = { Default: { - Label: Color.Neutral[50], - Fill: Color.Primary[950], + 'Label_&_Icon': Chad.Text.Secondary, + Fill: Chad.Layer['1'].Fill, + Stroke: Chad.Badges.Border.Default, }, Hover: { - Label: Color.Neutral[50], - Fill: Color.Primary[800], + 'Label_&_Icon': Grays['50'], + Fill: Violets['950'], }, Current: { - Label: Text.TextColors.Primary, - Fill: Layer[1].Fill, - Outline: Color.Primary[500], + 'Label_&_Icon': Chad.Text.Highlight, + Fill: Chad.Layer['2'].Fill, + Outline: Violets['500'], }, - }, - OverLined: { - Inset: InsetOverline, + } as const + const Badges = { + Border: { + Default: Chad.Badges.Border.Default, + Active: Chad.Badges.Border.Active, + Alert: Chad.Badges.Border.Alert, + Highlight: Chad.Badges.Border.Highlight, + Warning: Chad.Badges.Border.Warning, + Accent: Chad.Badges.Border.Accent, + }, + Label: { + Default: Chad.Badges.Label.Default, + Active: Chad.Badges.Label.Active, + Alert: Chad.Badges.Label.Alert, + Highlight: Chad.Badges.Label.Highlight, + Warning: Chad.Badges.Label.Warning, + Accent: Chad.Badges.Label.Accent, + }, + Fill: { + Default: Chad.Badges.Fill.Default, + Active: Chad.Badges.Fill.Active, + Alert: Chad.Badges.Fill.Alert, + Highlight: Chad.Badges.Fill.Highlight, + Warning: Chad.Badges.Fill.Warning, + Accent: Chad.Badges.Fill.Accent, + }, + } as const + const Chart = { + Liquidation_Zone: { + Current: Yellows['400'], + Future: Blues['200'], + }, + Candles: { + Positive: Greens['400'], + Negative: Reds['600'], + }, + Lines: { + Positive: Greens['400'], + Negative: Reds['600'], + Line_1: Violets['500'], + Line_2: Yellows['500'], + Line_3: Greens['500'], + }, + } as const + const Toggles = { Default: { - Label: Text.TextColors.Secondary, - Outline: Color.Neutral[200], + 'Label_&_Icon': Chad.Text.Primary, + Fill: Violets['300'], }, Hover: { - Label: Text.TextColors.Primary, - Fill: Color.Neutral[200], - Outline: Color.Neutral[500], + 'Label_&_Icon': Chad.Text.Highlight, + Fill: Chad.Layer['3'].Fill, }, Current: { - Label: Text.TextColors.Primary, - Outline: Color.Primary[500], + 'Label_&_Icon': Grays['50'], + Fill: Violets['800'], }, - }, - } as const - - const Chips = { - BorderRadius: { - Clickable: 0, - NonClickable: 0, - }, - Default: { - Label: Text.TextColors.Secondary, - Fill: Layer[1].Fill, - Stroke: Layer[2].Outline, - }, - Hover: { - Label: Color.Neutral[50], - Fill: Color.Primary[950], - }, - Current: { - Label: Text.TextColors.Primary, - Fill: Layer[2].Fill, - Outline: Layer.Highlight.Outline, - }, - } as const - - const Badges = { - Label: { - Default: Chad.Badges.Label.Default, - Active: Chad.Badges.Label.Active, - Alert: Chad.Badges.Label.Alert, - Highlight: Chad.Badges.Label.Highlight, - Warning: Chad.Badges.Label.Warning, - Accent: Chad.Badges.Label.Accent, - }, - Border: { - Default: Chad.Badges.Border.Default, - Active: Chad.Badges.Border.Active, - Alert: Chad.Badges.Border.Alert, - Highlight: Chad.Badges.Border.Highlight, - Warning: Chad.Badges.Border.Warning, - Accent: Chad.Badges.Border.Accent, - }, - Fill: { - Default: Chad.Badges.Fill.Default, - Active: Chad.Badges.Fill.Active, - Alert: Chad.Badges.Fill.Alert, - Highlight: Chad.Badges.Fill.Highlight, - Warning: Chad.Badges.Fill.Warning, - Accent: Chad.Badges.Fill.Accent, - }, - } as const - - const Chart = { - LiquidationZone: { - Current: Yellows[400], - Future: Blues[200], - }, - Candles: { - Positive: Greens[400], - Negative: Reds[600], - }, - Lines: { - Positive: Greens[400], - Negative: Reds[600], - Line1: Color.Primary[500], - Line2: Yellows[500], - Line3: Color.Secondary[500], - }, - } as const - - const Toggles = { - Default: { - Label: Text.TextColors.Primary, - Fill: Color.Primary[300], - }, - Hover: { - Label: Text.TextColors.Highlight, - Fill: Layer[3].Fill, - }, - Current: { - Label: Grays[50], - Fill: Color.Primary[800], - }, - } as const - + } as const const Table = { - Header: { Fill: Chad.Tables.Header.Fill }, - Row: { - Default: Chad.Layer[1].Fill, - Selected: Chad.Layer.TypeAction.Selected, - Hover: Chad.Layer.TypeAction.Hover, - }, - } as const - - const InputBaseDefaultFill = Grays[100] - const Inputs = { - Base: { - Default: { - Fill: InputBaseDefaultFill, - Border: { - Default: Grays[200], - Active: Violets[400], - Filled: Violets[600], - Error: Reds[500], + Header: { + Fill: Chad.Tables.Header.Fill, + 'Label_&_icon': { + Default: Chad.Tables.Header['Label_&_Icon'].Default, + Hover: Chad.Tables.Header['Label_&_Icon'].Active, + Active: Chad.Tables.Header['Label_&_Icon'].Active, }, }, - Nested: { - Nested: Grays[50], - Fill: Violets[50], - Border: { - Default: Grays[200], - Active: Violets[400], - Filled: Violets[600], - Error: Reds[500], + Row: { + Default: Chad.Tables.Row.Default, + Selected: Chad.Tables.Row.Selected, + Hover: Chad.Tables.Row.Hover, + }, + } as const + const InputBaseDefaultFill = Grays['100'] + const Inputs = { + Base: { + Default: { + Fill: { + Default: Grays['100'], + Active: Grays['100'], + }, + Border: { + Default: Grays['200'], + Active: Violets['400'], + Filled: Violets['600'], + Error: Reds['500'], + }, + }, + Nested: { + Nested: Grays['50'], + Fill: Violets['50'], + Border: { + Default: Grays['200'], + Active: Violets['400'], + Filled: Violets['400'], + Error: Reds['500'], + }, }, }, - }, - Large: { - Default: { - Fill: InputBaseDefaultFill, + Large: { + Default: { + Fill: Grays['100'], + Outline: Grays['200'], + }, }, - }, - } as const + } as const const Sliders = { default: { @@ -1116,7 +1323,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - + const Switch = { Default: { Fill: Layer[1].Fill, @@ -1126,10 +1333,10 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], - Label: Grays[50], + Label: Grays[50], }, } as const - + return { theme: 'chad', Color, From e8e37e5bd804c45361aaf7604f740ed24779f98c Mon Sep 17 00:00:00 2001 From: JustJousting Date: Tue, 25 Nov 2025 04:05:52 +0200 Subject: [PATCH 2/4] fix: theme variable name mappings --- .../src/themes/components/mui-input-base.ts | 2 +- .../src/themes/design/0_primitives.ts | 2 + .../src/themes/design/1_sizes_spaces.ts | 306 +-- .../src/themes/design/1_surfaces_text.ts | 142 +- .../curve-ui-kit/src/themes/design/2_theme.ts | 2231 +++++++++-------- 5 files changed, 1255 insertions(+), 1428 deletions(-) diff --git a/packages/curve-ui-kit/src/themes/components/mui-input-base.ts b/packages/curve-ui-kit/src/themes/components/mui-input-base.ts index 9070864b3..15a7b7806 100644 --- a/packages/curve-ui-kit/src/themes/components/mui-input-base.ts +++ b/packages/curve-ui-kit/src/themes/components/mui-input-base.ts @@ -14,7 +14,7 @@ export const defineMuiInputBase = ( ): Components['MuiInputBase'] => ({ styleOverrides: { root: { - backgroundColor: Base.Default.Fill, + backgroundColor: Base.Default.Fill.Default, // color the whole input base when accepting autofill suggestions in Chromium browsers ':has(input:autofill)': { backgroundColor: 'light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4))', diff --git a/packages/curve-ui-kit/src/themes/design/0_primitives.ts b/packages/curve-ui-kit/src/themes/design/0_primitives.ts index e6ab523ef..75c9e9713 100644 --- a/packages/curve-ui-kit/src/themes/design/0_primitives.ts +++ b/packages/curve-ui-kit/src/themes/design/0_primitives.ts @@ -104,6 +104,7 @@ export const Spacing = { '300': '0.5rem', // 8px '350': '0.875rem', // 14px '400': '1rem', // 16px + '450': '1.25rem', // 20px '500': '1.5rem', // 24px '600': '2rem', // 32px '700': '3rem', // 48px @@ -122,6 +123,7 @@ export const Sizing = { '300': '1.5rem', // 24px '350': '1.75rem', // 28px '400': '2rem', // 32px + '450': '2.25rem', '500': '2.5rem', // 40px '600': '3rem', // 48px '650': '3.5rem', // 56px diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts index 9d1d76ccd..f1bc935d4 100644 --- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts +++ b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts @@ -1,188 +1,52 @@ import { Sizing, Spacing } from './0_primitives' const MappedSpacing = { - '3xs': { - mobile: Spacing['75'], - tablet: Spacing['75'], - desktop: Spacing['75'], - }, - 'xxs': { - mobile: Spacing['100'], - tablet: Spacing['100'], - desktop: Spacing['100'], - }, - 'xs': { - mobile: Spacing['100'], - tablet: Spacing['200'], - desktop: Spacing['200'], - }, - 'sm': { - mobile: Spacing['200'], - tablet: Spacing['300'], - desktop: Spacing['300'], - }, - 'md': { - mobile: Spacing['300'], - tablet: Spacing['400'], - desktop: Spacing['400'], - }, - 'lg': { - mobile: Spacing['400'], - tablet: Spacing['500'], - desktop: Spacing['500'], - }, - 'xl': { - mobile: Spacing['500'], - tablet: Spacing['600'], - desktop: Spacing['600'], - }, - 'xxl': { - mobile: Spacing['600'], - tablet: Spacing['700'], - desktop: Spacing['700'], - }, - '3xl': { - mobile: Spacing['700'], - tablet: Spacing['800'], - desktop: Spacing['800'], - }, + '3xs': { mobile: Spacing['75'], tablet: Spacing['75'], desktop: Spacing['75'] }, + xxs: { mobile: Spacing['100'], tablet: Spacing['100'], desktop: Spacing['100'] }, + xs: { mobile: Spacing['100'], tablet: Spacing['200'], desktop: Spacing['200'] }, + sm: { mobile: Spacing['200'], tablet: Spacing['300'], desktop: Spacing['300'] }, + md: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['400'] }, + lg: { mobile: Spacing['400'], tablet: Spacing['500'], desktop: Spacing['500'] }, + xl: { mobile: Spacing['500'], tablet: Spacing['600'], desktop: Spacing['600'] }, + xxl: { mobile: Spacing['600'], tablet: Spacing['700'], desktop: Spacing['700'] }, + '3xl': { mobile: Spacing['700'], tablet: Spacing['800'], desktop: Spacing['800'] }, } as const const MappedSizing = { - 'xxs': { - mobile: Sizing['50'], - tablet: Sizing['100'], - desktop: Sizing['100'], - }, - 'xs': { - mobile: Sizing['150'], - tablet: Sizing['200'], - desktop: Sizing['200'], - }, - 'sm': { - mobile: Sizing['200'], - tablet: Sizing['300'], - desktop: Sizing['300'], - }, - 'md': { - mobile: Sizing['300'], - tablet: Sizing['400'], - desktop: Sizing['400'], - }, - 'lg': { - mobile: Sizing['400'], - tablet: Sizing['500'], - desktop: Sizing['500'], - }, - 'xl': { - mobile: Sizing['500'], - tablet: Sizing['600'], - desktop: Sizing['600'], - }, - 'xxl': { - mobile: Sizing['600'], - tablet: Sizing['700'], - desktop: Sizing['700'], - }, - '3xl': { - mobile: Sizing['700'], - tablet: Sizing['800'], - desktop: Sizing['800'], - }, + xxs: { mobile: Sizing['50'], tablet: Sizing['100'], desktop: Sizing['100'] }, + xs: { mobile: Sizing['150'], tablet: Sizing['200'], desktop: Sizing['200'] }, + sm: { mobile: Sizing['200'], tablet: Sizing['300'], desktop: Sizing['300'] }, + md: { mobile: Sizing['300'], tablet: Sizing['400'], desktop: Sizing['400'] }, + lg: { mobile: Sizing['400'], tablet: Sizing['500'], desktop: Sizing['500'] }, + xl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['600'] }, + xxl: { mobile: Sizing['600'], tablet: Sizing['700'], desktop: Sizing['700'] }, + '3xl': { mobile: Sizing['700'], tablet: Sizing['800'], desktop: Sizing['800'] }, } as const const MappedIconSize = { - 'xxs': { - mobile: Sizing['100'], - tablet: Sizing['125'], - desktop: Sizing['125'], - }, - 'xs': { - mobile: Sizing['125'], - tablet: Sizing['150'], - desktop: Sizing['150'], - }, - 'sm': { - mobile: Sizing['150'], - tablet: Sizing['200'], - desktop: Sizing['200'], - }, - 'md': { - mobile: Sizing['250'], - tablet: Sizing['250'], - desktop: Sizing['250'], - }, - 'lg': { - mobile: Sizing['300'], - tablet: Sizing['350'], - desktop: Sizing['350'], - }, - 'xl': { - mobile: Sizing['400'], - tablet: Sizing['500'], - desktop: Sizing['500'], - }, - 'xxl': { - mobile: Sizing['500'], - tablet: Sizing['600'], - desktop: Sizing['600'], - }, - '3xl': { - mobile: Sizing['600'], - tablet: Sizing['700'], - desktop: Sizing['700'], - }, - '4xl': { - mobile: Sizing['700'], - tablet: Sizing['800'], - desktop: Sizing['800'], - }, + xxs: { mobile: Sizing['100'], tablet: Sizing['125'], desktop: Sizing['125'] }, + xs: { mobile: Sizing['125'], tablet: Sizing['150'], desktop: Sizing['150'] }, + sm: { mobile: Sizing['150'], tablet: Sizing['200'], desktop: Sizing['200'] }, + md: { mobile: Sizing['250'], tablet: Sizing['250'], desktop: Sizing['250'] }, + lg: { mobile: Sizing['300'], tablet: Sizing['350'], desktop: Sizing['350'] }, + xl: { mobile: Sizing['400'], tablet: Sizing['500'], desktop: Sizing['500'] }, + xxl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['600'] }, + '3xl': { mobile: Sizing['600'], tablet: Sizing['700'], desktop: Sizing['700'] }, + '4xl': { mobile: Sizing['700'], tablet: Sizing['800'], desktop: Sizing['800'] }, } as const const MappedGrid = { - 'Column_Spacing': { - mobile: Spacing['300'], - tablet: Spacing['400'], - desktop: Spacing['500'], - }, - 'Row_Spacing': { - mobile: Spacing['300'], - tablet: Spacing['400'], - desktop: Spacing['500'], - }, + Column_Spacing: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['500'] }, + Row_Spacing: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['500'] }, } as const const MappedFontSize = { - 'xs': { - mobile: Sizing['125'], - tablet: Sizing['125'], - desktop: Sizing['125'], - }, - 'sm': { - mobile: Sizing['150'], - tablet: Sizing['150'], - desktop: Sizing['150'], - }, - 'md': { - mobile: Sizing['200'], - tablet: Sizing['200'], - desktop: Sizing['200'], - }, - 'lg': { - mobile: Sizing['250'], - tablet: Sizing['300'], - desktop: Sizing['300'], - }, - 'xl': { - mobile: Sizing['350'], - tablet: Sizing['400'], - desktop: Sizing['400'], - }, - 'xxl': { - mobile: Sizing['500'], - tablet: Sizing['600'], - desktop: Sizing['700'], - }, + xs: { mobile: Sizing['125'], tablet: Sizing['125'], desktop: Sizing['125'] }, + sm: { mobile: Sizing['150'], tablet: Sizing['150'], desktop: Sizing['150'] }, + md: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, + lg: { mobile: Sizing['250'], tablet: Sizing['300'], desktop: Sizing['300'] }, + xl: { mobile: Sizing['350'], tablet: Sizing['400'], desktop: Sizing['400'] }, + xxl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['700'] }, } as const const MappedButtonSize = { @@ -193,29 +57,12 @@ const MappedButtonSize = { } const SliderHeight = { - small: { - mobile: Sizing[200], - tablet: Sizing[200], - desktop: Sizing[200], - }, - medium: { - mobile: Sizing[300], - tablet: Sizing[300], - desktop: Sizing[300], - }, + small: { mobile: Sizing[200], tablet: Sizing[200], desktop: Sizing[200] }, + medium: { mobile: Sizing[300], tablet: Sizing[300], desktop: Sizing[300] }, } as const - const SliderThumbWidth = { - small: { - mobile: Sizing[150], - tablet: Sizing[150], - desktop: Sizing[150], - }, - medium: { - mobile: Sizing[200], - tablet: Sizing[200], - desktop: Sizing[200], - }, + small: { mobile: Sizing[150], tablet: Sizing[150], desktop: Sizing[150] }, + medium: { mobile: Sizing[200], tablet: Sizing[200], desktop: Sizing[200] }, } as const const MappedFontWeight = { @@ -229,32 +76,32 @@ const MappedFontWeight = { } as const const MappedLineHeight = { - 'xs': { + xs: { mobile: '0.75rem', // 12px tablet: '0.75rem', // 12px desktop: '0.875rem', // 14px }, - 'sm': { + sm: { mobile: '0.875rem', // 14px tablet: '0.875rem', // 14px desktop: '1rem', // 16px }, - 'md': { + md: { mobile: '1.5rem', // 24px tablet: '1.5rem', // 24px desktop: '1.5rem', // 24px }, - 'lg': { + lg: { mobile: '1.5rem', // 24px tablet: '1.5rem', // 24px desktop: '2rem', // 32px }, - 'xl': { + xl: { mobile: '2rem', // 32px tablet: '2rem', // 32px desktop: '2.5rem', // 40px }, - 'xxl': { + xxl: { mobile: '2.5rem', // 40px tablet: '2.5rem', // 40px desktop: '4rem', // 64px @@ -270,24 +117,10 @@ const MappedModalWidth = { } const MappedModalHeight = { - sm: { - maxHeight: '100vh', - height: '100vh', - minHeight: '100vh', - }, - md: { - maxHeight: '100vh', - height: '80vh', - minHeight: '80vh', - }, + sm: { maxHeight: '100vh', height: '100vh', minHeight: '100vh' }, + md: { maxHeight: '100vh', height: '80vh', minHeight: '80vh' }, } - -const MappedColumnWidth = { - sm: 125, - md: 200, - lg: 350, -} - +const MappedColumnWidth = { sm: 125, md: 200, lg: 350 } export const SizesAndSpaces = { Spacing: MappedSpacing, Sizing: MappedSizing, @@ -298,37 +131,22 @@ export const SizesAndSpaces = { FontWeight: MappedFontWeight, LineHeight: MappedLineHeight, OutlineWidth: '0.125rem', // 2px - Slider: { - Height: SliderHeight, - ThumbWidth: SliderThumbWidth, - }, - Width: { - modal: MappedModalWidth, - column: MappedColumnWidth, - }, - MinWidth: { - tableHeader: '50rem', // 800px - select: '5rem', // 80px - actionCard: '20rem', // 320px - twoCardLayout: 961, // matches old action card breakpoint (in px) - }, + Slider: { Height: SliderHeight, ThumbWidth: SliderThumbWidth }, + Width: { modal: MappedModalWidth, column: MappedColumnWidth }, + MinWidth: { tableHeader: '50rem', select: '5rem', actionCard: '20rem', twoCardLayout: 961 }, MaxWidth: { - disclaimer: '43rem', // 688px - tableTitle: '67rem', // 1072px - table: '96rem', // 1536px - banner: '96rem', // 1536px - footer: '96rem', // 1536px - connectWallet: '50rem', // 800px - actionCard: '23.375rem', // 374px - legacyActionCard: '29rem', // 464px // only used in the scrvusd action card which isn't refactored to use the new token inputs yet - emptyStateCard: '27.5rem', // 440px - section: '59.5rem', // 952px - tooltip: '27.5rem', // 440px - sliderInput: { - sm: '5rem', // 80px, - md: '6.25rem', // 100px, - bands: '6.8rem', - }, + disclaimer: '43rem', + tableTitle: '67rem', + table: '96rem', + banner: '96rem', + footer: '96rem', + connectWallet: '50rem', + actionCard: '23.375rem', + legacyActionCard: '29rem', + emptyStateCard: '27.5rem', + section: '59.5rem', + tooltip: '27.5rem', + sliderInput: { sm: '5rem', md: '6.25rem', bands: '6.8rem' }, }, Height: { modal: MappedModalHeight, diff --git a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts index d6a618509..0fe3ad6c3 100644 --- a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts +++ b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts @@ -11,6 +11,7 @@ function createLightSurfaces() { Success: Greens['600'], Warning: Oranges['500'], Error: Reds['500'], + Inverted: Grays['50'], }, FilledFeedback: { info: { @@ -35,7 +36,6 @@ function createLightSurfaces() { }, }, } as const - const Layer = { '1': { Fill: Grays['50'], @@ -61,28 +61,27 @@ function createLightSurfaces() { Hover: Grays['150'], }, } as const - return { Text, Layer, Tables: { Row: { - Default: Layer['1'].Fill, - Selected: Layer.TypeAction.Hover, - Hover: Layer.TypeAction.Selected, + Default: Grays['50'], + Selected: Grays['150'], + Hover: Blues['100'], }, Header: { Fill: Grays['200'], - 'Label_&_Icon': { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Label: { + Default: Grays['700'], + Hover: Blues['500'], + Active: Grays['950'], }, }, }, Badges: { Label: { - Default: Text.Primary, + Default: Grays['950'], Active: Grays['10'], Alert: Grays['10'], Highlight: Blues['500'], @@ -98,10 +97,10 @@ function createLightSurfaces() { Accent: Blues['500'], }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['50'], Active: Greens['400'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['50'], Warning: Yellows['500'], Accent: Blues['500'], }, @@ -142,9 +141,9 @@ function createDarkSurfaces() { Success: Greens['400'], Warning: Yellows['500'], Error: Reds['500'], + Inverted: Grays['950'], }, } as const - const Layer = { '1': { Fill: Grays['950'], @@ -170,22 +169,21 @@ function createDarkSurfaces() { Hover: Grays['750'], }, } as const - return { Text, Layer, Tables: { Row: { - Default: Layer['1'].Fill, - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, + Default: Grays['950'], + Selected: Blues['900'], + Hover: Grays['750'], }, Header: { Fill: Grays['800'], - 'Label_&_Icon': { - Default: Text.secondary, - Hover: Text.highlight, - Active: Text.primary, + Label: { + Default: Grays['300'], + Hover: Blues['400'], + Active: Grays['50'], }, }, }, @@ -207,10 +205,10 @@ function createDarkSurfaces() { Accent: Blues['400'], }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['950'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['950'], Warning: Yellows['500'], Accent: Blues['400'], }, @@ -224,6 +222,7 @@ function createChadSurfaces() { Warning: Oranges['500'], Success: Greens['600'], Error: Reds['500'], + Inverted: Grays['50'], }, FilledFeedback: { info: { @@ -253,7 +252,6 @@ function createChadSurfaces() { Disabled: Grays['500'], Highlight: Violets['600'], } as const - const Layer = { '1': { Fill: Grays['150'], @@ -279,28 +277,27 @@ function createChadSurfaces() { }, Highlight: Violets['800'], } as const - return { Text, Layer, Tables: { Row: { - Default: Layer['1'].Fill, - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, + Default: Grays['150'], + Selected: Violets['50'], + Hover: Violets['200'], }, Header: { - Fill: Layer['3'].Fill, - 'Label_&_Icon': { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Fill: Grays['400'], + Label: { + Default: Grays['750'], + Hover: Violets['600'], + Active: Grays['950'], }, }, }, Badges: { Label: { - Default: Text.Primary, + Default: Grays['950'], Active: Grays['10'], Alert: Grays['10'], Highlight: Violets['800'], @@ -316,10 +313,10 @@ function createChadSurfaces() { Accent: Violets['800'], }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['150'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['150'], Warning: Yellows['500'], Accent: Violets['800'], }, @@ -338,6 +335,7 @@ function createLightInvertedSurfaces() { Success: Greens['300'], Warning: Oranges['500'], Error: Reds['500'], + Inverted: Grays['50'], }, FilledFeedback: { info: { @@ -362,7 +360,6 @@ function createLightInvertedSurfaces() { }, }, } as const - const Layer = { '1': { Fill: Grays['950'], @@ -388,28 +385,27 @@ function createLightInvertedSurfaces() { Hover: Grays['850'], }, } as const - return { Text, Layer, Tables: { Row: { - Default: Layer['1'].Fill, - Selected: Layer.TypeAction.Hover, - Hover: Layer.TypeAction.Selected, + Default: Grays['950'], + Selected: Grays['850'], + Hover: Grays['750'], }, Header: { Fill: Grays['800'], - 'Label_&_Icon': { - Default: Text.Primary, - Hover: Text.Highlight, - Active: Text.Secondary, + Label: { + Default: Grays['50'], + Hover: Blues['300'], + Active: Grays['300'], }, }, }, Badges: { Label: { - Default: Text.Primary, + Default: Grays['50'], Active: Grays['10'], Alert: Grays['10'], Highlight: Blues['400'], @@ -425,7 +421,7 @@ function createLightInvertedSurfaces() { Accent: Blues['400'], }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['950'], Active: Greens['400'], Alert: Reds['500'], Highlight: Grays['10'], @@ -469,9 +465,9 @@ function createDarkInvertedSurfaces() { Success: Greens['600'], Warning: Oranges['500'], Error: Reds['500'], + Inverted: Grays['950'], }, } as const - const Layer = { '1': { Fill: Grays['75'], @@ -497,22 +493,21 @@ function createDarkInvertedSurfaces() { Hover: Blues['100'], }, } as const - return { Text, Layer, Tables: { Row: { - Default: Layer['1'].Fill, - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, + Default: Grays['75'], + Selected: Blues['50'], + Hover: Blues['100'], }, Header: { Fill: Grays['200'], - 'Label_&_Icon': { - Default: Text.secondary, - Hover: Text.highlight, - Active: Text.primary, + Label: { + Default: Grays['750'], + Hover: Blues['500'], + Active: Grays['950'], }, }, }, @@ -534,10 +529,10 @@ function createDarkInvertedSurfaces() { Accent: Blues['500'], }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['75'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['75'], Warning: Yellows['500'], Accent: Blues['500'], }, @@ -551,6 +546,7 @@ function createChadInvertedSurfaces() { Warning: Yellows['500'], Success: Greens['500'], Error: Reds['500'], + Inverted: Grays['50'], }, FilledFeedback: { info: { @@ -580,7 +576,6 @@ function createChadInvertedSurfaces() { Disabled: Grays['500'], Highlight: Violets['400'], } as const - const Layer = { '1': { Fill: Violets['950'], @@ -606,28 +601,27 @@ function createChadInvertedSurfaces() { }, Highlight: Violets['950'], } as const - return { Text, Layer, Tables: { Row: { - Default: Layer['1'].Fill, - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, + Default: Violets['950'], + Selected: Violets['900'], + Hover: Violets['800'], }, Header: { - Fill: Layer['3'].Fill, - 'Label_&_Icon': { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Fill: Violets['700'], + Label: { + Default: Grays['300'], + Hover: Violets['400'], + Active: Grays['50'], }, }, }, Badges: { Label: { - Default: Text.Primary, + Default: Grays['50'], Active: Grays['10'], Alert: Grays['10'], Highlight: Violets['200'], @@ -643,10 +637,10 @@ function createChadInvertedSurfaces() { Accent: Violets['400'], }, Fill: { - Default: Layer['1'].Fill, + Default: Violets['950'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Violets['950'], Warning: Yellows['500'], Accent: Violets['400'], }, @@ -655,11 +649,7 @@ function createChadInvertedSurfaces() { } export const SurfacesAndText = { - plain: { - Light: createLightSurfaces(), - Dark: createDarkSurfaces(), - Chad: createChadSurfaces(), - }, + plain: { Light: createLightSurfaces(), Dark: createDarkSurfaces(), Chad: createChadSurfaces() }, inverted: { Light: createLightInvertedSurfaces(), Dark: createDarkInvertedSurfaces(), diff --git a/packages/curve-ui-kit/src/themes/design/2_theme.ts b/packages/curve-ui-kit/src/themes/design/2_theme.ts index d83aaa53c..7fc9a4fd1 100644 --- a/packages/curve-ui-kit/src/themes/design/2_theme.ts +++ b/packages/curve-ui-kit/src/themes/design/2_theme.ts @@ -9,18 +9,8 @@ const InsetOverline = '0 0 auto' as const const InsetUnderline = 'auto 0 0' as const const SliderBackground = { - Safe: { - 25: Reds[400], - 50: Reds[300], - 75: Reds[200], - 100: Greens[500], - }, - Danger: { - 25: Reds[200], - 50: Reds[300], - 75: Reds[400], - 100: Reds[500], - }, + Safe: { 25: Reds[400], 50: Reds[300], 75: Reds[200], 100: Greens[500] }, + Danger: { 25: Reds[200], 50: Reds[300], 75: Reds[400], 100: Reds[500] }, Disabled: { 25: alpha(Grays[300], 0.5), 50: alpha(Grays[300], 0.5), @@ -31,402 +21,419 @@ const SliderBackground = { export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Light) => { const Color = { - Neutral: { - '25': Grays['25'], - '50': Grays['50'], - '75': Grays['75'], - '100': Grays['100'], - '150': Grays['150'], - '200': Grays['200'], - '300': Grays['300'], - '400': Grays['400'], - '500': Grays['500'], - '600': Grays['600'], - '700': Grays['700'], - '750': Grays['750'], - '800': Grays['800'], - '850': Grays['850'], - '900': Grays['900'], - '950': Grays['950'], - '975': Grays['975'], - }, - Primary: { - '50': Blues['50'], - '100': Blues['100'], - '200': Blues['200'], - '300': Blues['300'], - '400': Blues['400'], - '500': Blues['500'], - '600': Blues['600'], - '700': Blues['700'], - '800': Blues['800'], - '900': Blues['900'], - '950': Blues['950'], - }, - Secondary: { - '100': Greens['100'], - '200': Greens['200'], - '300': Greens['300'], - '400': Greens['400'], - '500': Greens['500'], - '600': Greens['600'], - '700': Greens['700'], - '800': Greens['800'], - }, - Tertiary: { - '200': Reds['200'], - '300': Yellows['500'], - '400': Oranges['500'], - '600': Reds['500'], - }, - } as const + Neutral: { + '25': Grays['25'], + '50': Grays['50'], + '75': Grays['75'], + '100': Grays['100'], + '150': Grays['150'], + '200': Grays['200'], + '300': Grays['300'], + '400': Grays['400'], + '500': Grays['500'], + '600': Grays['600'], + '700': Grays['700'], + '750': Grays['750'], + '800': Grays['800'], + '850': Grays['850'], + '900': Grays['900'], + '950': Grays['950'], + '975': Grays['975'], + }, + Primary: { + '50': Blues['50'], + '100': Blues['100'], + '200': Blues['200'], + '300': Blues['300'], + '400': Blues['400'], + '500': Blues['500'], + '600': Blues['600'], + '700': Blues['700'], + '800': Blues['800'], + '900': Blues['900'], + '950': Blues['950'], + }, + Secondary: { + '100': Greens['100'], + '200': Greens['200'], + '300': Greens['300'], + '400': Greens['400'], + '500': Greens['500'], + '600': Greens['600'], + '700': Greens['700'], + '800': Greens['800'], + }, + Tertiary: { + '200': Reds['200'], + '300': Yellows['500'], + '400': Oranges['500'], + '600': Reds['500'], + }, + } as const + const Layer = { - '1': { - Fill: Light.Layer['1'].Fill, - Outline: Light.Layer['1'].Outline, + '1': { + Fill: Light.Layer['1'].Fill, + Outline: Light.Layer['1'].Outline, + }, + '2': { + Fill: Light.Layer['2'].Fill, + Outline: Light.Layer['2'].Outline, + }, + '3': { + Fill: Light.Layer['3'].Fill, + Outline: Light.Layer['3'].Outline, + }, + App: { + Background: '#f0edeb', + }, + Feedback: { + Info: Light.Layer.Feedback.Info, + Success: Light.Layer.Feedback.Success, + Warning: Light.Layer.Feedback.Warning, + Error: Light.Layer.Feedback.Error, + }, + TypeAction: { + Selected: Light.Layer.TypeAction.Selected, + Hover: Light.Layer.TypeAction.Hover, + }, + Highlight: { + Fill: Light.Layer.Highlight, + Outline: Color.Primary['500'], + }, + } as const + + const Text = { + TextColors: { + Primary: Light.Text.Primary, + Secondary: Light.Text.Secondary, + Tertiary: Light.Text.Tertiary, + Highlight: Light.Text.Highlight, + Disabled: Light.Text.Disabled, + FilledFeedback: { + Info: { + Primary: Light.Text.FilledFeedback.info.primary, + Secondary: Light.Text.FilledFeedback.info.secondary, + }, + Highlight: { + Primary: Light.Text.FilledFeedback.highlight.primary, + Secondary: Light.Text.FilledFeedback.highlight.secondary, + }, + Warning: { + Primary: Light.Text.FilledFeedback.warning.primary, + Secondary: Light.Text.FilledFeedback.warning.secondary, + }, + Alert: { + Primary: Light.Text.FilledFeedback.alert.primary, + Secondary: Light.Text.FilledFeedback.alert.secondary, + }, + Success: { + Primary: Light.Text.FilledFeedback.success.primary, + Secondary: Light.Text.FilledFeedback.success.secondary, + }, }, - '2': { - Fill: Light.Layer['2'].Fill, - Outline: Light.Layer['2'].Outline, + Feedback: { + Success: Light.Text.Feedback.Success, + Warning: Light.Text.Feedback.Warning, + Error: Light.Text.Feedback.Error, + Inverted: Grays['50'], }, - '3': { - Fill: Light.Layer['3'].Fill, - Outline: Light.Layer['3'].Outline, + }, + FontFamily: { + Heading: 'Mona Sans', + Body: 'Mona Sans', + Mono: 'Mona Sans', + Button: 'Mona Sans', + }, + } as const + + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Color.Primary['500'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, + Primary: { + Default: { + Label: Grays['50'], + Fill: Blues['500'], }, - App: { - Background: '#f0edeb', + Hover: { + Label: Grays['50'], + Fill: Grays['900'], }, - Feedback: { - Informational: Light.Layer.Feedback.Info, - Success: Light.Layer.Feedback.Success, - Warning: Light.Layer.Feedback.Warning, - Error: Light.Layer.Feedback.Error, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Color.Primary['100'], }, - TypeAction: { - Selected: Light.Layer.TypeAction.Selected, - Hover: Light.Layer.TypeAction.Hover, + }, + Secondary: { + Default: { + Label: Grays['50'], + Fill: Grays['900'], + }, + Hover: { + Label: Grays['50'], + Fill: Blues['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Color.Neutral['600'], }, - Highlight: { - Fill: Light.Layer.Highlight, + }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['300'], + }, + Hover: { + Label: Blues['500'], Outline: Blues['500'], }, - } as const - const Text = { - TextColors: { - Primary: Light.Text.Primary, - Secondary: Light.Text.Secondary, - Tertiary: Light.Text.Tertiary, - Highlight: Light.Text.Highlight, - Disabled: Light.Text.Disabled, - FilledFeedback: { - Info: { - Primary: Light.Text.FilledFeedback.info.primary, - Secondary: Light.Text.FilledFeedback.info.secondary, - }, - Highlight: { - Primary: Light.Text.FilledFeedback.highlight.primary, - Secondary: Light.Text.FilledFeedback.highlight.secondary, - }, - Warning: { - Primary: Light.Text.FilledFeedback.warning.primary, - Secondary: Light.Text.FilledFeedback.warning.secondary, - }, - Alert: { - Primary: Light.Text.FilledFeedback.alert.primary, - Secondary: Light.Text.FilledFeedback.alert.secondary, - }, - Success: { - Primary: Light.Text.FilledFeedback.success.primary, - Secondary: Light.Text.FilledFeedback.success.secondary, - }, - }, - Feedback: { - Success: Light.Text.Feedback.Success, - Warning: Light.Text.Feedback.Warning, - Error: Light.Text.Feedback.Error, - }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Text.TextColors.Disabled, }, - FontFamily: { - Heading: 'Mona Sans', - Body: 'Mona Sans', - Mono: 'Mona Sans', - Button: 'Mona Sans', + }, + Ghost: { + Default: { + Label: Text.TextColors.Highlight, }, - } as const - const Button = { - Focus_Outline_Width: '0.125rem', // 2px - Focus_Outline: Blues['500'], - Radius: { - xs: '0', - sm: '0', - md: '0', - lg: '0', - }, - Primary: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Blues['500'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Light.Text.Disabled, - Fill: Blues['100'], - }, + Hover: { + Label: Grays['975'], + Fill: Grays['900'], }, - Secondary: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Blues['500'], - }, - Disabled: { - 'Label_&_Icon': Light.Text.Disabled, - Fill: Grays['600'], - }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Grays['500'], }, - Outlined: { - Default: { - 'Label_&_Icon': Grays['950'], - Outline: Grays['300'], - }, - Hover: { - 'Label_&_Icon': Blues['500'], - Outline: Blues['500'], - }, - Disabled: { - 'Label_&_Icon': Light.Text.Disabled, - Outline: Light.Text.Disabled, - }, + }, + Success: { + Default: { + Label: Grays['900'], + Fill: Greens['400'], }, - Ghost: { - Default: { - 'Label_&_Icon': Light.Text.Highlight, - }, - Hover: { - 'Label_&_Icon': Grays['975'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Light.Text.Disabled, - Fill: Grays['500'], - }, + Hover: { + Label: Greens['300'], + Fill: Grays['900'], }, - Success: { - Default: { - 'Label_&_Icon': Grays['900'], - Fill: Greens['400'], - }, - Hover: { - 'Label_&_Icon': Greens['300'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Light.Text.Disabled, - Fill: Greens['600'], - }, + Disabled: { + Label: Light.Text.Disabled, + Fill: Greens['600'], }, - Error: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Reds['500'], - }, - Hover: { - 'Label_&_Icon': Oranges['500'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Grays['300'], - Fill: Reds['700'], - }, + }, + Error: { + Default: { + Label: Grays['50'], + Fill: Reds['500'], }, - Navigation: { - Default: { - 'Label_&_Icon': Light.Text.Tertiary, - }, - Hover: { - 'Label_&_Icon': Light.Text.Primary, - 'Label_&_Icon_2': Light.Text.Primary, - Fill: Light.Layer['1'].Fill, - }, - Current: { - 'Label_&_Icon': Grays['50'], - Fill: Light.Layer.Highlight, - }, + Hover: { + Label: Oranges['500'], + Fill: Grays['900'], + }, + Disabled: { + Label: Grays['300'], + Fill: Reds['700'], + }, + }, + Navigation: { + Default: { + Label: Text.TextColors.Tertiary, + }, + Hover: { + Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, }, - } as const + Current: { + Label: Grays['50'], + Fill: Layer.Highlight.Fill, + }, + }, + Transition: 'Transition', + } as const + const Tabs = { - UnderLined: { - Container_Border: Light.Layer['1'].Outline, - Default: { - 'Label_&_Icon': Light.Text.Secondary, - Outline: Light.Layer['2'].Outline, - }, - Hover: { - 'Label_&_Icon': Light.Text.Highlight, - Outline: Blues['500'], - }, - Current: { - 'Label_&_Icon': Light.Text.Primary, - Outline: Blues['500'], - }, + UnderLined: { + Container_Border: Light.Layer['1'].Outline, + Default: { + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, - Contained: { - Default: { - 'Label_&_Icon': Light.Text.Secondary, - Fill: Grays['300'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], - }, - Current: { - 'Label_&_Icon': Light.Text.Primary, - Fill: Light.Layer['1'].Fill, - Outline: Blues['500'], - }, + Hover: { + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, - OverLined: { - Default: { - 'Label_&_Icon': Light.Text.Secondary, - Outline: Light.Layer['2'].Outline, - }, - Hover: { - 'Label_&_Icon': Light.Text.Primary, - Outline: Grays['500'], - }, - Current: { - 'Label_&_Icon': Light.Text.Primary, - Outline: Blues['500'], - }, + Current: { + Label: Text.TextColors.Primary, + Outline: Color.Primary['500'], }, - } as const - const Chips = { + }, + Contained: { Default: { - 'Label_&_Icon': Light.Text.Secondary, - Fill: Light.Layer['2'].Fill, - Stroke: Light.Badges.Border.Default, + Label: Text.TextColors.Secondary, + Fill: Color.Neutral['300'], }, Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], + Label: Color.Neutral['50'], + Fill: Color.Neutral['900'], }, Current: { - 'Label_&_Icon': Light.Text.Highlight, - Fill: Light.Layer['2'].Fill, - Outline: Blues['500'], + Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, + Outline: Color.Primary['500'], }, - } as const - const Badges = { - Border: { - Default: Light.Badges.Border.Default, - Active: Light.Badges.Border.Active, - Alert: Light.Badges.Border.Alert, - Highlight: Light.Badges.Border.Highlight, - Warning: Light.Badges.Border.Warning, - Accent: Light.Badges.Border.Accent, - }, - Label: { - Default: Light.Badges.Label.Default, - Active: Light.Badges.Label.Active, - Alert: Light.Badges.Label.Alert, - Highlight: Light.Badges.Label.Highlight, - Warning: Light.Badges.Label.Warning, - Accent: Light.Badges.Label.Accent, - }, - Fill: { - Default: Light.Badges.Fill.Default, - Active: Light.Badges.Fill.Active, - Alert: Light.Badges.Fill.Alert, - Highlight: Light.Badges.Fill.Highlight, - Warning: Light.Badges.Fill.Warning, - Accent: Light.Badges.Fill.Accent, - }, - } as const - const Chart = { - Liquidation_Zone: { - Current: Yellows['400'], - Future: Blues['200'], - }, - Candles: { - Positive: Greens['400'], - Negative: Reds['600'], - }, - Lines: { - Positive: Greens['400'], - Negative: Reds['600'], - Line_1: Blues['500'], - Line_2: Yellows['500'], - Line_3: Greens['500'], - }, - } as const - const Toggles = { + }, + OverLined: { Default: { - 'Label_&_Icon': Light.Text.Primary, - Fill: Grays['100'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - 'Label_&_Icon': Light.Text.Highlight, - Fill: Light.Layer['3'].Fill, + Label: Text.TextColors.Primary, + Outline: Color.Neutral['500'], }, Current: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], + Label: Text.TextColors.Primary, + Outline: Color.Primary['500'], }, - } as const + }, + Transition: 'Transition', + } as const + + const Chips = { + Default: { + Label: Text.TextColors.Secondary, + Fill: Layer['2'].Fill, + Stroke: Light.Badges.Border.Default, + }, + Hover: { + Label: Color.Neutral['50'], + Fill: Color.Neutral['900'], + }, + Current: { + Label: Text.TextColors.Highlight, + Fill: Layer['2'].Fill, + Outline: Layer.Highlight.Outline, + }, + BorderRadius: { + Clickable: '0', + NonClickable: '6.25rem', // 100px + }, + } as const + + const Badges = { + Border: { + Default: Light.Badges.Border.Default, + Active: Light.Badges.Border.Active, + Alert: Light.Badges.Border.Alert, + Highlight: Light.Badges.Border.Highlight, + Warning: Light.Badges.Border.Warning, + Accent: Light.Badges.Border.Accent, + }, + Label: { + Default: Light.Badges.Label.Default, + Active: Light.Badges.Label.Active, + Alert: Light.Badges.Label.Alert, + Highlight: Light.Badges.Label.Highlight, + Warning: Light.Badges.Label.Warning, + Accent: Light.Badges.Label.Accent, + }, + Fill: { + Default: Light.Badges.Fill.Default, + Active: Light.Badges.Fill.Active, + Alert: Light.Badges.Fill.Alert, + Highlight: Light.Badges.Fill.Highlight, + Warning: Light.Badges.Fill.Warning, + Accent: Light.Badges.Fill.Accent, + }, + } as const + + const Chart = { + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], + }, + Candles: { + Positive: Greens['400'], + Negative: Reds['600'], + }, + Lines: { + Positive: Greens['400'], + Negative: Reds['600'], + Line1: Color.Primary['500'], + Line2: Yellows['500'], + Line3: Color.Secondary['500'], + }, + } as const + + const Toggles = { + Default: { + Label: Text.TextColors.Primary, + Fill: Color.Neutral['100'], + }, + Hover: { + Label: Text.TextColors.Highlight, + Fill: Layer['3'].Fill, + }, + Current: { + Label: Grays['50'], + Fill: Color.Neutral['900'], + }, + } as const + const Table = { - Header: { - Fill: Light.Tables.Header.Fill, - 'Label_&_icon': { - Default: Light.Tables.Header['Label_&_Icon'].Default, - Hover: Light.Tables.Header['Label_&_Icon'].Hover, - Active: Light.Tables.Header['Label_&_Icon'].Active, - }, - }, - Row: { - Default: Light.Tables.Row.Default, - Selected: Light.Tables.Row.Selected, - Hover: Light.Tables.Row.Hover, + Header: { + Fill: Light.Tables.Header.Fill, + 'Label_&_icon': { + Default: Light.Tables.Header.Label.Default, + Hover: Light.Tables.Header.Label.Hover, + Active: Light.Tables.Header.Label.Active, }, - } as const + }, + Row: { + Default: Light.Tables.Row.Default, + Selected: Light.Tables.Row.Selected, + Hover: Light.Tables.Row.Hover, + }, + } as const + const InputBaseDefaultFill = Grays['100'] + const Inputs = { - Base: { - Default: { - Fill: { - Default: Grays['100'], - Active: Grays['50'], - }, - Border: { - Default: Grays['200'], - Active: Light.Text.Highlight, - Filled: Grays['850'], - Error: Reds['500'], - }, + Base: { + Default: { + Fill: { + Default: Grays['100'], + Active: Grays['50'], }, - Nested: { - Nested: Grays['10'], - Fill: Grays['100'], - Border: { - Default: Grays['400'], - Active: Light.Text.Highlight, - Filled: Grays['850'], - Error: Reds['500'], - }, + Border: { + Default: Grays['200'], + Active: Light.Text.Highlight, + Filled: Grays['850'], + Error: Reds['500'], }, }, - Large: { - Default: { - Fill: Grays['100'], - Outline: Grays['200'], + Nested: { + Nested: Grays['10'], + Fill: Grays['100'], + Border: { + Default: Grays['400'], + Active: Light.Text.Highlight, + Filled: Grays['850'], + Error: Reds['500'], }, }, - } as const + }, + Large: { + Default: { + Fill: Grays['100'], + Outline: Grays['200'], + }, + }, + } as const const Sliders = { default: { @@ -439,20 +446,12 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - + const Switch = { - Default: { - Fill: Layer[1].Fill, - Outline: Color.Neutral[400], - Label: Color.Primary[500], - }, - Checked: { - Fill: Color.Primary[500], - Outline: Color.Neutral[400], - Label: Grays[50], - }, + Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const - + return { theme: 'light', Color, @@ -473,402 +472,419 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) => { const Color = { - Neutral: { - '25': Grays['975'], - '50': Grays['950'], - '75': Grays['900'], - '100': Grays['850'], - '150': Grays['800'], - '200': Grays['750'], - '300': Grays['700'], - '400': Grays['600'], - '500': Grays['500'], - '600': Grays['400'], - '700': Grays['300'], - '750': Grays['200'], - '800': Grays['150'], - '850': Grays['100'], - '900': Grays['75'], - '950': Grays['50'], - '975': Grays['25'], - }, - Primary: { - '50': Blues['950'], - '100': Blues['900'], - '200': Blues['800'], - '300': Blues['700'], - '400': Blues['600'], - '500': Blues['500'], - '600': Blues['400'], - '700': Blues['300'], - '800': Blues['200'], - '900': Blues['100'], - '950': Blues['50'], - }, - Secondary: { - '100': Greens['800'], - '200': Greens['700'], - '300': Greens['600'], - '400': Greens['500'], - '500': Greens['400'], - '600': Greens['300'], - '700': Greens['200'], - '800': Greens['100'], - }, - Tertiary: { - '200': Reds['800'], - '300': Oranges['500'], - '400': Yellows['500'], - '600': Yellows['400'], - }, - } as const + Neutral: { + '25': Grays['975'], + '50': Grays['950'], + '75': Grays['900'], + '100': Grays['850'], + '150': Grays['800'], + '200': Grays['750'], + '300': Grays['700'], + '400': Grays['600'], + '500': Grays['500'], + '600': Grays['400'], + '700': Grays['300'], + '750': Grays['200'], + '800': Grays['150'], + '850': Grays['100'], + '900': Grays['75'], + '950': Grays['50'], + '975': Grays['25'], + }, + Primary: { + '50': Blues['950'], + '100': Blues['900'], + '200': Blues['800'], + '300': Blues['700'], + '400': Blues['600'], + '500': Blues['500'], + '600': Blues['400'], + '700': Blues['300'], + '800': Blues['200'], + '900': Blues['100'], + '950': Blues['50'], + }, + Secondary: { + '100': Greens['800'], + '200': Greens['700'], + '300': Greens['600'], + '400': Greens['500'], + '500': Greens['400'], + '600': Greens['300'], + '700': Greens['200'], + '800': Greens['100'], + }, + Tertiary: { + '200': Reds['800'], + '300': Oranges['500'], + '400': Yellows['500'], + '600': Yellows['400'], + }, + } as const + const Layer = { - '1': { - Fill: Dark.Layer['1'].Fill, - Outline: Dark.Layer['1'].Outline, + '1': { + Fill: Dark.Layer['1'].Fill, + Outline: Dark.Layer['1'].Outline, + }, + '2': { + Fill: Dark.Layer['2'].Fill, + Outline: Dark.Layer['2'].Outline, + }, + '3': { + Fill: Dark.Layer['3'].Fill, + Outline: Dark.Layer['3'].Outline, + }, + App: { + Background: '#12110f', + }, + Feedback: { + Info: Dark.Layer.Feedback.Info, + Success: Dark.Layer.Feedback.Success, + Warning: Dark.Layer.Feedback.Warning, + Error: Dark.Layer.Feedback.Error, + }, + TypeAction: { + Selected: Dark.Layer.TypeAction.Selected, + Hover: Dark.Layer.TypeAction.Hover, + }, + Highlight: { + Fill: Dark.Layer.Highlight, + Outline: Color.Primary['500'], + }, + } as const + + const Text = { + TextColors: { + Primary: Dark.Text.primary, + Secondary: Dark.Text.secondary, + Tertiary: Dark.Text.tertiary, + Highlight: Dark.Text.highlight, + Disabled: Dark.Text.Disabled, + FilledFeedback: { + Info: { + Primary: Dark.Text.FilledFeedback.info.primary, + Secondary: Dark.Text.FilledFeedback.info.secondary, + }, + Highlight: { + Primary: Dark.Text.FilledFeedback.highlight.primary, + Secondary: Dark.Text.FilledFeedback.highlight.secondary, + }, + Warning: { + Primary: Dark.Text.FilledFeedback.warning.primary, + Secondary: Dark.Text.FilledFeedback.warning.secondary, + }, + Alert: { + Primary: Dark.Text.FilledFeedback.alert.primary, + Secondary: Dark.Text.FilledFeedback.alert.secondary, + }, + Success: { + Primary: Dark.Text.FilledFeedback.success.primary, + Secondary: Dark.Text.FilledFeedback.success.secondary, + }, + }, + Feedback: { + Success: Dark.Text.Feedback.Success, + Warning: Dark.Text.Feedback.Warning, + Error: Dark.Text.Feedback.Error, + Inverted: Grays['950'], }, - '2': { - Fill: Dark.Layer['2'].Fill, - Outline: Dark.Layer['2'].Outline, + }, + FontFamily: { + Heading: 'Mona Sans', + Body: 'Mona Sans', + Mono: 'Mona Sans', + Button: 'Mona Sans', + }, + } as const + + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Color.Primary['500'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, + Primary: { + Default: { + Label: Grays['50'], + Fill: Blues['500'], }, - '3': { - Fill: Dark.Layer['3'].Fill, - Outline: Dark.Layer['3'].Outline, + Hover: { + Label: Grays['900'], + Fill: Grays['50'], }, - App: { - Background: '#12110f', + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Color.Primary['800'], }, - Feedback: { - Informational: Dark.Layer.Feedback.Info, - Success: Dark.Layer.Feedback.Success, - Warning: Dark.Layer.Feedback.Warning, - Error: Dark.Layer.Feedback.Error, + }, + Secondary: { + Default: { + Label: Grays['900'], + Fill: Grays['50'], + }, + Hover: { + Label: Grays['900'], + Fill: Blues['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Color.Neutral['600'], }, - TypeAction: { - Selected: Dark.Layer.TypeAction.Selected, - Hover: Dark.Layer.TypeAction.Hover, + }, + Outlined: { + Default: { + Label: Grays['50'], + Outline: Grays['700'], }, - Highlight: { - Fill: Dark.Layer.Highlight, + Hover: { + Label: Blues['500'], Outline: Blues['500'], }, - } as const - const Text = { - TextColors: { - Primary: Dark.Text.primary, - Secondary: Dark.Text.secondary, - Tertiary: Dark.Text.tertiary, - Highlight: Dark.Text.highlight, - Disabled: Dark.Text.Disabled, - FilledFeedback: { - Info: { - Primary: Dark.Text.FilledFeedback.info.primary, - Secondary: Dark.Text.FilledFeedback.info.secondary, - }, - Highlight: { - Primary: Dark.Text.FilledFeedback.highlight.primary, - Secondary: Dark.Text.FilledFeedback.highlight.secondary, - }, - Warning: { - Primary: Dark.Text.FilledFeedback.warning.primary, - Secondary: Dark.Text.FilledFeedback.warning.secondary, - }, - Alert: { - Primary: Dark.Text.FilledFeedback.alert.primary, - Secondary: Dark.Text.FilledFeedback.alert.secondary, - }, - Success: { - Primary: Dark.Text.FilledFeedback.success.primary, - Secondary: Dark.Text.FilledFeedback.success.secondary, - }, - }, - Feedback: { - Success: Dark.Text.Feedback.Success, - Warning: Dark.Text.Feedback.Warning, - Error: Dark.Text.Feedback.Error, - }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Text.TextColors.Disabled, }, - FontFamily: { - Heading: 'Mona Sans', - Body: 'Mona Sans', - Mono: 'Mona Sans', - Button: 'Mona Sans', + }, + Ghost: { + Default: { + Label: Color.Primary['700'], }, - } as const - const Button = { - Focus_Outline_Width: '0.125rem', // 2px - Focus_Outline: Blues['500'], - Radius: { - xs: '0', - sm: '0', - md: '0', - lg: '0', - }, - Primary: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Blues['500'], - }, - Hover: { - 'Label_&_Icon': Grays['900'], - Fill: Grays['50'], - }, - Disabled: { - 'Label_&_Icon': Dark.Text.Disabled, - Fill: Blues['200'], - }, + Hover: { + Label: Grays['50'], + Fill: Grays['50'], }, - Secondary: { - Default: { - 'Label_&_Icon': Grays['900'], - Fill: Grays['50'], - }, - Hover: { - 'Label_&_Icon': Grays['900'], - Fill: Blues['500'], - }, - Disabled: { - 'Label_&_Icon': Dark.Text.Disabled, - Fill: Grays['400'], - }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Grays['850'], }, - Outlined: { - Default: { - 'Label_&_Icon': Grays['50'], - Outline: Grays['700'], - }, - Hover: { - 'Label_&_Icon': Blues['500'], - Outline: Blues['500'], - }, - Disabled: { - 'Label_&_Icon': Dark.Text.Disabled, - Outline: Dark.Text.Disabled, - }, + }, + Success: { + Default: { + Label: Grays['900'], + Fill: Greens['300'], }, - Ghost: { - Default: { - 'Label_&_Icon': Blues['300'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['50'], - }, - Disabled: { - 'Label_&_Icon': Dark.Text.Disabled, - Fill: Grays['850'], - }, + Hover: { + Label: Greens['500'], + Fill: Grays['50'], }, - Success: { - Default: { - 'Label_&_Icon': Grays['900'], - Fill: Greens['300'], - }, - Hover: { - 'Label_&_Icon': Greens['500'], - Fill: Grays['50'], - }, - Disabled: { - 'Label_&_Icon': Dark.Text.Disabled, - Fill: Greens['600'], - }, + Disabled: { + Label: Dark.Text.Disabled, + Fill: Greens['600'], }, - Error: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Reds['500'], - }, - Hover: { - 'Label_&_Icon': Oranges['500'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Grays['300'], - Fill: Reds['700'], - }, + }, + Error: { + Default: { + Label: Grays['50'], + Fill: Reds['500'], }, - Navigation: { - Default: { - 'Label_&_Icon': Dark.Text.tertiary, - }, - Hover: { - 'Label_&_Icon': Dark.Text.primary, - 'Label_&_Icon_2': Dark.Text.primary, - Fill: Dark.Layer['1'].Fill, - }, - Current: { - 'Label_&_Icon': Grays['50'], - Fill: Dark.Layer.Highlight, - }, + Hover: { + Label: Oranges['500'], + Fill: Grays['900'], + }, + Disabled: { + Label: Grays['300'], + Fill: Reds['700'], }, - } as const + }, + Navigation: { + Default: { + Label: Text.TextColors.Tertiary, + }, + Hover: { + Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, + }, + Current: { + Label: Grays['50'], + Fill: Layer.Highlight.Fill, + }, + }, + Transition: 'Transition', + } as const + const Tabs = { - UnderLined: { - Container_Border: Dark.Layer['1'].Outline, - Default: { - 'Label_&_Icon': Dark.Text.secondary, - Outline: Dark.Layer['2'].Outline, - }, - Hover: { - 'Label_&_Icon': Dark.Text.highlight, - Outline: Blues['500'], - }, - Current: { - 'Label_&_Icon': Dark.Text.primary, - Outline: Blues['500'], - }, + UnderLined: { + Container_Border: Dark.Layer['1'].Outline, + Default: { + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, - Contained: { - Default: { - 'Label_&_Icon': Dark.Text.secondary, - Fill: Grays['750'], - }, - Hover: { - 'Label_&_Icon': Grays['950'], - Fill: Grays['75'], - }, - Current: { - 'Label_&_Icon': Dark.Text.primary, - Fill: Dark.Layer['1'].Fill, - Outline: Blues['500'], - }, + Hover: { + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, - OverLined: { - Default: { - 'Label_&_Icon': Dark.Text.secondary, - Outline: Dark.Layer['2'].Outline, - }, - Hover: { - 'Label_&_Icon': Dark.Text.primary, - Outline: Grays['500'], - }, - Current: { - 'Label_&_Icon': Dark.Text.primary, - Outline: Blues['500'], - }, + Current: { + Label: Text.TextColors.Primary, + Outline: Color.Primary['500'], }, - } as const - const Chips = { + }, + Contained: { Default: { - 'Label_&_Icon': Dark.Text.primary, - Fill: Dark.Layer['2'].Fill, - Stroke: Dark.Badges.Border.Default, + Label: Text.TextColors.Secondary, + Fill: Color.Neutral['200'], }, Hover: { - 'Label_&_Icon': Grays['950'], - Fill: Grays['75'], + Label: Color.Neutral['50'], + Fill: Color.Neutral['900'], }, Current: { - 'Label_&_Icon': Text.TextColors.Highlight, - Fill: Dark.Layer['2'].Fill, - Outline: Blues['500'], + Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, + Outline: Color.Primary['500'], }, - } as const - const Badges = { - Border: { - Default: Dark.Badges.Border.Default, - Active: Dark.Badges.Border.Active, - Alert: Dark.Badges.Border.Alert, - Highlight: Dark.Badges.Border.Highlight, - Warning: Dark.Badges.Border.Warning, - Accent: Dark.Badges.Border.Accent, - }, - Label: { - Default: Dark.Badges.Label.Default, - Active: Dark.Badges.Label.Active, - Alert: Dark.Badges.Label.Alert, - Highlight: Dark.Badges.Label.Highlight, - Warning: Dark.Badges.Label.Warning, - Accent: Dark.Badges.Label.Accent, - }, - Fill: { - Default: Dark.Badges.Fill.Default, - Active: Dark.Badges.Fill.Active, - Alert: Dark.Badges.Fill.Alert, - Highlight: Dark.Badges.Fill.Highlight, - Warning: Dark.Badges.Fill.Warning, - Accent: Dark.Badges.Fill.Accent, - }, - } as const - const Chart = { - Liquidation_Zone: { - Current: Oranges['950'], - Future: Blues['800'], - }, - Candles: { - Positive: Greens['300'], - Negative: Reds['500'], - }, - Lines: { - Positive: Greens['300'], - Negative: Reds['500'], - Line_1: Blues['500'], - Line_2: Yellows['500'], - Line_3: Greens['400'], - }, - } as const - const Toggles = { + }, + OverLined: { Default: { - 'Label_&_Icon': Dark.Text.primary, - Fill: Grays['850'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - 'Label_&_Icon': Dark.Text.highlight, - Fill: Dark.Layer['3'].Fill, + Label: Text.TextColors.Primary, + Outline: Color.Neutral['500'], }, Current: { - 'Label_&_Icon': Grays['950'], - Fill: Grays['50'], + Label: Text.TextColors.Primary, + Outline: Color.Primary['500'], }, - } as const + }, + Transition: 'Transition', + } as const + + const Chips = { + Default: { + Label: Text.TextColors.Primary, + Fill: Layer['2'].Fill, + Stroke: Dark.Badges.Border.Default, + }, + Hover: { + Label: Color.Neutral['50'], + Fill: Color.Neutral['900'], + }, + Current: { + Label: plain.Light.Text.Highlight, + Fill: Layer['2'].Fill, + Outline: Layer.Highlight.Outline, + }, + BorderRadius: { + Clickable: '0', + NonClickable: '6.25rem', // 100px + }, + } as const + + const Badges = { + Border: { + Default: Dark.Badges.Border.Default, + Active: Dark.Badges.Border.Active, + Alert: Dark.Badges.Border.Alert, + Highlight: Dark.Badges.Border.Highlight, + Warning: Dark.Badges.Border.Warning, + Accent: Dark.Badges.Border.Accent, + }, + Label: { + Default: Dark.Badges.Label.Default, + Active: Dark.Badges.Label.Active, + Alert: Dark.Badges.Label.Alert, + Highlight: Dark.Badges.Label.Highlight, + Warning: Dark.Badges.Label.Warning, + Accent: Dark.Badges.Label.Accent, + }, + Fill: { + Default: Dark.Badges.Fill.Default, + Active: Dark.Badges.Fill.Active, + Alert: Dark.Badges.Fill.Alert, + Highlight: Dark.Badges.Fill.Highlight, + Warning: Dark.Badges.Fill.Warning, + Accent: Dark.Badges.Fill.Accent, + }, + } as const + + const Chart = { + LiquidationZone: { + Current: Oranges['950'], + Future: Blues['800'], + }, + Candles: { + Positive: Greens['300'], + Negative: Reds['500'], + }, + Lines: { + Positive: Greens['300'], + Negative: Reds['500'], + Line1: Color.Primary['500'], + Line2: Yellows['500'], + Line3: Color.Secondary['500'], + }, + } as const + + const Toggles = { + Default: { + Label: Text.TextColors.Primary, + Fill: Color.Neutral['100'], + }, + Hover: { + Label: Text.TextColors.Highlight, + Fill: Layer['3'].Fill, + }, + Current: { + Label: Color.Neutral['50'], + Fill: Color.Neutral['950'], + }, + } as const + const Table = { - Header: { - Fill: Dark.Tables.Header.Fill, - 'Label_&_icon': { - Default: Dark.Tables.Header['Label_&_Icon'].Default, - Hover: Dark.Tables.Header['Label_&_Icon'].Hover, - Active: Dark.Tables.Header['Label_&_Icon'].Active, - }, - }, - Row: { - Default: Dark.Tables.Row.Default, - Selected: Dark.Tables.Row.Selected, - Hover: Dark.Tables.Row.Hover, + Header: { + Fill: Dark.Tables.Header.Fill, + 'Label_&_icon': { + Default: Dark.Tables.Header.Label.Default, + Hover: Dark.Tables.Header.Label.Hover, + Active: Dark.Tables.Header.Label.Active, }, - } as const + }, + Row: { + Default: Dark.Tables.Row.Default, + Selected: Dark.Tables.Row.Selected, + Hover: Dark.Tables.Row.Hover, + }, + } as const + const InputBaseDefaultFill = Grays['900'] + const Inputs = { - Base: { - Default: { - Fill: { - Default: Grays['900'], - Active: Grays['900'], - }, - Border: { - Default: Grays['800'], - Active: Dark.Text.highlight, - Filled: Grays['75'], - Error: Reds['500'], - }, + Base: { + Default: { + Fill: { + Default: Grays['900'], + Active: Grays['900'], }, - Nested: { - Nested: Grays['850'], - Fill: Grays['850'], - Border: { - Default: Grays['600'], - Active: Dark.Text.highlight, - Filled: Grays['75'], - Error: Reds['500'], - }, + Border: { + Default: Grays['800'], + Active: Dark.Text.highlight, + Filled: Grays['75'], + Error: Reds['500'], }, }, - Large: { - Default: { - Fill: Grays['900'], - Outline: Grays['800'], + Nested: { + Nested: Grays['850'], + Fill: Grays['850'], + Border: { + Default: Grays['600'], + Active: Dark.Text.highlight, + Filled: Grays['75'], + Error: Reds['500'], }, }, - } as const + }, + Large: { + Default: { + Fill: Grays['900'], + Outline: Grays['800'], + }, + }, + } as const const Sliders = { default: { @@ -881,20 +897,12 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - + const Switch = { - Default: { - Fill: Layer[1].Fill, - Outline: Color.Neutral[400], - Label: Color.Primary[500], - }, - Checked: { - Fill: Color.Primary[500], - Outline: Color.Neutral[400], - Label: Grays[50], - }, + Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const - + return { theme: 'dark', Color, @@ -915,402 +923,419 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) => { const Color = { - Neutral: { - '25': Grays['25'], - '50': Grays['50'], - '75': Grays['75'], - '100': Grays['100'], - '150': Grays['150'], - '200': Grays['200'], - '300': Grays['300'], - '400': Grays['400'], - '500': Grays['500'], - '600': Grays['600'], - '700': Grays['700'], - '750': Grays['750'], - '800': Grays['800'], - '850': Grays['850'], - '900': Grays['900'], - '950': Grays['950'], - '975': Grays['975'], - }, - Primary: { - '50': Violets['50'], - '100': Violets['100'], - '200': Violets['200'], - '300': Violets['300'], - '400': Violets['400'], - '500': Violets['500'], - '600': Violets['600'], - '700': Violets['700'], - '800': Violets['800'], - '900': Violets['900'], - '950': Violets['950'], - }, - Secondary: { - '100': Greens['100'], - '200': Greens['200'], - '300': Greens['300'], - '400': Greens['400'], - '500': Greens['500'], - '600': Greens['600'], - '700': Greens['700'], - '800': Greens['800'], - }, - Tertiary: { - '200': Reds['200'], - '300': Yellows['500'], - '400': Oranges['500'], - '600': Reds['500'], - }, - } as const + Neutral: { + '25': Grays['25'], + '50': Grays['50'], + '75': Grays['75'], + '100': Grays['100'], + '150': Grays['150'], + '200': Grays['200'], + '300': Grays['300'], + '400': Grays['400'], + '500': Grays['500'], + '600': Grays['600'], + '700': Grays['700'], + '750': Grays['750'], + '800': Grays['800'], + '850': Grays['850'], + '900': Grays['900'], + '950': Grays['950'], + '975': Grays['975'], + }, + Primary: { + '50': Violets['50'], + '100': Violets['100'], + '200': Violets['200'], + '300': Violets['300'], + '400': Violets['400'], + '500': Violets['500'], + '600': Violets['600'], + '700': Violets['700'], + '800': Violets['800'], + '900': Violets['900'], + '950': Violets['950'], + }, + Secondary: { + '100': Greens['100'], + '200': Greens['200'], + '300': Greens['300'], + '400': Greens['400'], + '500': Greens['500'], + '600': Greens['600'], + '700': Greens['700'], + '800': Greens['800'], + }, + Tertiary: { + '200': Reds['200'], + '300': Yellows['500'], + '400': Oranges['500'], + '600': Reds['500'], + }, + } as const + const Layer = { - '1': { - Fill: Chad.Layer['1'].Fill, - Outline: Chad.Layer['1'].Outline, + '1': { + Fill: Chad.Layer['1'].Fill, + Outline: Chad.Layer['1'].Outline, + }, + '2': { + Fill: Chad.Layer['2'].Fill, + Outline: Chad.Layer['2'].Outline, + }, + '3': { + Fill: Chad.Layer['3'].Fill, + Outline: Chad.Layer['3'].Outline, + }, + App: { + Background: '#bdbbec', + }, + Feedback: { + Info: Chad.Layer.Feedback.Info, + Success: Chad.Layer.Feedback.Success, + Warning: Chad.Layer.Feedback.Warning, + Error: Chad.Layer.Feedback.Error, + }, + TypeAction: { + Selected: Chad.Layer.TypeAction.Selected, + Hover: Chad.Layer.TypeAction.Hover, + }, + Highlight: { + Fill: Chad.Layer.Highlight, + Outline: Color.Primary['500'], + }, + } as const + + const Text = { + TextColors: { + Primary: Chad.Text.Primary, + Secondary: Chad.Text.Secondary, + Tertiary: Chad.Text.Tertiary, + Highlight: Chad.Text.Highlight, + Disabled: Chad.Text.Disabled, + FilledFeedback: { + Info: { + Primary: Chad.Text.FilledFeedback.info.primary, + Secondary: Chad.Text.FilledFeedback.info.secondary, + }, + Highlight: { + Primary: Chad.Text.FilledFeedback.highlight.primary, + Secondary: Chad.Text.FilledFeedback.highlight.secondary, + }, + Warning: { + Primary: Chad.Text.FilledFeedback.warning.primary, + Secondary: Chad.Text.FilledFeedback.warning.secondary, + }, + Alert: { + Primary: Chad.Text.FilledFeedback.alert.primary, + Secondary: Chad.Text.FilledFeedback.alert.secondary, + }, + Success: { + Primary: Chad.Text.FilledFeedback.success.primary, + Secondary: Chad.Text.FilledFeedback.success.secondary, + }, }, - '2': { - Fill: Chad.Layer['2'].Fill, - Outline: Chad.Layer['2'].Outline, + Feedback: { + Success: Chad.Text.Feedback.Success, + Warning: Chad.Text.Feedback.Warning, + Error: Chad.Text.Feedback.Error, + Inverted: Grays['50'], }, - '3': { - Fill: Chad.Layer['3'].Fill, - Outline: Chad.Layer['3'].Outline, + }, + FontFamily: { + Heading: 'Minecraft', + Body: 'Hubot Sans', + Mono: 'Hubot Sans', + Button: 'Minecraft', + }, + } as const + + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Color.Primary['600'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, + Primary: { + Default: { + Label: Grays['50'], + Fill: Violets['950'], }, - App: { - Background: '#bdbbec', + Hover: { + Label: Grays['50'], + Fill: Grays['900'], }, - Feedback: { - Informational: Chad.Layer.Feedback.Info, - Success: Chad.Layer.Feedback.Success, - Warning: Chad.Layer.Feedback.Warning, - Error: Chad.Layer.Feedback.Error, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Violets['200'], + }, + }, + Secondary: { + Default: { + Label: Grays['50'], + Fill: Grays['900'], }, - TypeAction: { - Selected: Chad.Layer.TypeAction.Selected, - Hover: Chad.Layer.TypeAction.Hover, + Hover: { + Label: Grays['50'], + Fill: Violets['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Grays['600'], + }, + }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['950'], }, - Highlight: { - Fill: Chad.Layer.Highlight, + Hover: { + Label: Violets['500'], Outline: Violets['500'], }, - } as const - const Text = { - TextColors: { - Primary: Chad.Text.Primary, - Secondary: Chad.Text.Secondary, - Tertiary: Chad.Text.Tertiary, - Highlight: Chad.Text.Highlight, - Disabled: Chad.Text.Disabled, - FilledFeedback: { - Info: { - Primary: Chad.Text.FilledFeedback.info.primary, - Secondary: Chad.Text.FilledFeedback.info.secondary, - }, - Highlight: { - Primary: Chad.Text.FilledFeedback.highlight.primary, - Secondary: Chad.Text.FilledFeedback.highlight.secondary, - }, - Warning: { - Primary: Chad.Text.FilledFeedback.warning.primary, - Secondary: Chad.Text.FilledFeedback.warning.secondary, - }, - Alert: { - Primary: Chad.Text.FilledFeedback.alert.primary, - Secondary: Chad.Text.FilledFeedback.alert.secondary, - }, - Success: { - Primary: Chad.Text.FilledFeedback.success.primary, - Secondary: Chad.Text.FilledFeedback.success.secondary, - }, - }, - Feedback: { - Success: Chad.Text.Feedback.Success, - Warning: Chad.Text.Feedback.Warning, - Error: Chad.Text.Feedback.Error, - }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Violets['200'], }, - FontFamily: { - Heading: 'Minecraft', - Body: 'Hubot Sans', - Mono: 'Hubot Sans', - Button: 'Minecraft', + }, + Ghost: { + Default: { + Label: Text.TextColors.Highlight, }, - } as const - const Button = { - Focus_Outline_Width: '0.125rem', // 2px - Focus_Outline: Violets['600'], - Radius: { - xs: '0', - sm: '0', - md: '0', - lg: '0', - }, - Primary: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Violets['950'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Chad.Text.Disabled, - Fill: Violets['200'], - }, + Hover: { + Label: Violets['800'], + Fill: Violets['500'], }, - Secondary: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Grays['900'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Violets['500'], - }, - Disabled: { - 'Label_&_Icon': Chad.Text.Disabled, - Fill: Grays['600'], - }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Violets['200'], }, - Outlined: { - Default: { - 'Label_&_Icon': Grays['950'], - Outline: Grays['950'], - }, - Hover: { - 'Label_&_Icon': Violets['500'], - Outline: Violets['500'], - }, - Disabled: { - 'Label_&_Icon': Chad.Text.Disabled, - Outline: Violets['200'], - }, + }, + Success: { + Default: { + Label: Grays['900'], + Fill: Greens['400'], }, - Ghost: { - Default: { - 'Label_&_Icon': Chad.Text.Highlight, - }, - Hover: { - 'Label_&_Icon': Violets['800'], - Fill: Violets['500'], - }, - Disabled: { - 'Label_&_Icon': Chad.Text.Disabled, - Fill: Violets['200'], - }, + Hover: { + Label: Greens['500'], + Fill: Grays['900'], }, - Success: { - Default: { - 'Label_&_Icon': Grays['900'], - Fill: Greens['400'], - }, - Hover: { - 'Label_&_Icon': Greens['500'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Chad.Text.Disabled, - Fill: Greens['600'], - }, + Disabled: { + Label: Chad.Text.Disabled, + Fill: Greens['600'], }, - Error: { - Default: { - 'Label_&_Icon': Grays['50'], - Fill: Reds['500'], - }, - Hover: { - 'Label_&_Icon': Oranges['500'], - Fill: Grays['900'], - }, - Disabled: { - 'Label_&_Icon': Grays['300'], - Fill: Reds['700'], - }, + }, + Error: { + Default: { + Label: Grays['50'], + Fill: Reds['500'], }, - Navigation: { - Default: { - 'Label_&_Icon': Chad.Text.Tertiary, - }, - Hover: { - 'Label_&_Icon': Chad.Text.Primary, - 'Label_&_Icon_2': Chad.Text.Primary, - Fill: Chad.Layer['1'].Fill, - }, - Current: { - 'Label_&_Icon': Grays['50'], - Fill: Chad.Layer.Highlight, - }, + Hover: { + Label: Oranges['500'], + Fill: Grays['900'], }, - } as const + Disabled: { + Label: Grays['300'], + Fill: Reds['700'], + }, + }, + Navigation: { + Default: { + Label: Text.TextColors.Tertiary, + }, + Hover: { + Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, + }, + Current: { + Label: Grays['50'], + Fill: Layer.Highlight.Fill, + }, + }, + Transition: 'Transition', + } as const + const Tabs = { - UnderLined: { - Container_Border: Chad.Layer['1'].Outline, - Default: { - 'Label_&_Icon': Chad.Text.Secondary, - Outline: Chad.Layer['2'].Outline, - }, - Hover: { - 'Label_&_Icon': Chad.Text.Highlight, - Outline: Violets['500'], - }, - Current: { - 'Label_&_Icon': Chad.Text.Primary, - Outline: Violets['500'], - }, + UnderLined: { + Container_Border: Layer['1'].Outline, + Default: { + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, - Contained: { - Default: { - 'Label_&_Icon': Chad.Text.FilledFeedback.highlight.secondary, - Fill: Violets['950'], - }, - Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Violets['800'], - }, - Current: { - 'Label_&_Icon': Chad.Text.Primary, - Fill: Chad.Layer['1'].Fill, - Outline: Violets['500'], - }, + Hover: { + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, - OverLined: { - Default: { - 'Label_&_Icon': Chad.Text.Secondary, - Outline: Chad.Layer['2'].Outline, - }, - Hover: { - 'Label_&_Icon': Chad.Text.Primary, - Outline: Grays['500'], - }, - Current: { - 'Label_&_Icon': Chad.Text.Primary, - Outline: Violets['500'], - }, + Current: { + Label: Text.TextColors.Primary, + Outline: Color.Primary['500'], }, - } as const - const Chips = { + }, + Contained: { Default: { - 'Label_&_Icon': Chad.Text.Secondary, - Fill: Chad.Layer['1'].Fill, - Stroke: Chad.Badges.Border.Default, + Label: Chad.Text.FilledFeedback.highlight.secondary, + Fill: Color.Primary['950'], }, Hover: { - 'Label_&_Icon': Grays['50'], - Fill: Violets['950'], + Label: Color.Neutral['50'], + Fill: Color.Primary['800'], }, Current: { - 'Label_&_Icon': Chad.Text.Highlight, - Fill: Chad.Layer['2'].Fill, - Outline: Violets['500'], + Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, + Outline: Color.Primary['500'], }, - } as const - const Badges = { - Border: { - Default: Chad.Badges.Border.Default, - Active: Chad.Badges.Border.Active, - Alert: Chad.Badges.Border.Alert, - Highlight: Chad.Badges.Border.Highlight, - Warning: Chad.Badges.Border.Warning, - Accent: Chad.Badges.Border.Accent, - }, - Label: { - Default: Chad.Badges.Label.Default, - Active: Chad.Badges.Label.Active, - Alert: Chad.Badges.Label.Alert, - Highlight: Chad.Badges.Label.Highlight, - Warning: Chad.Badges.Label.Warning, - Accent: Chad.Badges.Label.Accent, - }, - Fill: { - Default: Chad.Badges.Fill.Default, - Active: Chad.Badges.Fill.Active, - Alert: Chad.Badges.Fill.Alert, - Highlight: Chad.Badges.Fill.Highlight, - Warning: Chad.Badges.Fill.Warning, - Accent: Chad.Badges.Fill.Accent, - }, - } as const - const Chart = { - Liquidation_Zone: { - Current: Yellows['400'], - Future: Blues['200'], - }, - Candles: { - Positive: Greens['400'], - Negative: Reds['600'], - }, - Lines: { - Positive: Greens['400'], - Negative: Reds['600'], - Line_1: Violets['500'], - Line_2: Yellows['500'], - Line_3: Greens['500'], - }, - } as const - const Toggles = { + }, + OverLined: { Default: { - 'Label_&_Icon': Chad.Text.Primary, - Fill: Violets['300'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - 'Label_&_Icon': Chad.Text.Highlight, - Fill: Chad.Layer['3'].Fill, + Label: Text.TextColors.Primary, + Outline: Color.Neutral['500'], }, Current: { - 'Label_&_Icon': Grays['50'], - Fill: Violets['800'], + Label: Text.TextColors.Primary, + Outline: Color.Primary['500'], }, - } as const + }, + Transition: 'Transition', + } as const + + const Chips = { + Default: { + Label: Text.TextColors.Secondary, + Fill: Layer['1'].Fill, + Stroke: Chad.Badges.Border.Default, + }, + Hover: { + Label: Color.Neutral['50'], + Fill: Color.Primary['950'], + }, + Current: { + Label: Text.TextColors.Highlight, + Fill: Layer['2'].Fill, + Outline: Layer.Highlight.Outline, + }, + BorderRadius: { + Clickable: '0', + NonClickable: '0', + }, + } as const + + const Badges = { + Border: { + Default: Chad.Badges.Border.Default, + Active: Chad.Badges.Border.Active, + Alert: Chad.Badges.Border.Alert, + Highlight: Chad.Badges.Border.Highlight, + Warning: Chad.Badges.Border.Warning, + Accent: Chad.Badges.Border.Accent, + }, + Label: { + Default: Chad.Badges.Label.Default, + Active: Chad.Badges.Label.Active, + Alert: Chad.Badges.Label.Alert, + Highlight: Chad.Badges.Label.Highlight, + Warning: Chad.Badges.Label.Warning, + Accent: Chad.Badges.Label.Accent, + }, + Fill: { + Default: Chad.Badges.Fill.Default, + Active: Chad.Badges.Fill.Active, + Alert: Chad.Badges.Fill.Alert, + Highlight: Chad.Badges.Fill.Highlight, + Warning: Chad.Badges.Fill.Warning, + Accent: Chad.Badges.Fill.Accent, + }, + } as const + + const Chart = { + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], + }, + Candles: { + Positive: Greens['400'], + Negative: Reds['600'], + }, + Lines: { + Positive: Greens['400'], + Negative: Reds['600'], + Line1: Color.Primary['500'], + Line2: Yellows['500'], + Line3: Color.Secondary['500'], + }, + } as const + + const Toggles = { + Default: { + Label: Text.TextColors.Primary, + Fill: Color.Primary['300'], + }, + Hover: { + Label: Text.TextColors.Highlight, + Fill: Layer['3'].Fill, + }, + Current: { + Label: Grays['50'], + Fill: Color.Primary['800'], + }, + } as const + const Table = { - Header: { - Fill: Chad.Tables.Header.Fill, - 'Label_&_icon': { - Default: Chad.Tables.Header['Label_&_Icon'].Default, - Hover: Chad.Tables.Header['Label_&_Icon'].Active, - Active: Chad.Tables.Header['Label_&_Icon'].Active, - }, - }, - Row: { - Default: Chad.Tables.Row.Default, - Selected: Chad.Tables.Row.Selected, - Hover: Chad.Tables.Row.Hover, + Header: { + Fill: Chad.Tables.Header.Fill, + 'Label_&_icon': { + Default: Chad.Tables.Header.Label.Default, + Hover: Chad.Tables.Header.Label.Active, + Active: Chad.Tables.Header.Label.Active, }, - } as const + }, + Row: { + Default: Chad.Tables.Row.Default, + Selected: Chad.Tables.Row.Selected, + Hover: Chad.Tables.Row.Hover, + }, + } as const + const InputBaseDefaultFill = Grays['100'] + const Inputs = { - Base: { - Default: { - Fill: { - Default: Grays['100'], - Active: Grays['100'], - }, - Border: { - Default: Grays['200'], - Active: Violets['400'], - Filled: Violets['600'], - Error: Reds['500'], - }, + Base: { + Default: { + Fill: { + Default: Grays['100'], + Active: Grays['100'], }, - Nested: { - Nested: Grays['50'], - Fill: Violets['50'], - Border: { - Default: Grays['200'], - Active: Violets['400'], - Filled: Violets['400'], - Error: Reds['500'], - }, + Border: { + Default: Grays['200'], + Active: Violets['400'], + Filled: Violets['600'], + Error: Reds['500'], }, }, - Large: { - Default: { - Fill: Grays['100'], - Outline: Grays['200'], + Nested: { + Nested: Grays['50'], + Fill: Violets['50'], + Border: { + Default: Grays['200'], + Active: Violets['400'], + Filled: Violets['400'], + Error: Reds['500'], }, }, - } as const + }, + Large: { + Default: { + Fill: Grays['100'], + Outline: Grays['200'], + }, + }, + } as const const Sliders = { default: { @@ -1323,20 +1348,12 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - + const Switch = { - Default: { - Fill: Layer[1].Fill, - Outline: Color.Neutral[400], - Label: Color.Primary[500], - }, - Checked: { - Fill: Color.Primary[500], - Outline: Color.Neutral[400], - Label: Grays[50], - }, + Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const - + return { theme: 'chad', Color, From e03ddead05c80b1540be253ccb4bfb3326961081 Mon Sep 17 00:00:00 2001 From: JustJousting Date: Tue, 25 Nov 2025 21:04:56 +0200 Subject: [PATCH 3/4] refactor: re-run figma json export with script to apply figma updates --- .../src/themes/design/0_primitives.ts | 211 +++-- .../src/themes/design/1_sizes_spaces.ts | 114 +-- .../src/themes/design/1_surfaces_text.ts | 616 ++++++------- .../curve-ui-kit/src/themes/design/2_theme.ts | 833 +++++++++--------- 4 files changed, 854 insertions(+), 920 deletions(-) diff --git a/packages/curve-ui-kit/src/themes/design/0_primitives.ts b/packages/curve-ui-kit/src/themes/design/0_primitives.ts index 75c9e9713..bcab3b552 100644 --- a/packages/curve-ui-kit/src/themes/design/0_primitives.ts +++ b/packages/curve-ui-kit/src/themes/design/0_primitives.ts @@ -1,134 +1,134 @@ export const Grays = { - '10': '#fdfcfc', - '25': '#fafafa', - '50': '#f8f7f7', - '75': '#f6f4f4', - '100': '#eeeceb', - '150': '#e7e4e2', - '200': '#dedbd8', - '300': '#d4d0cc', - '400': '#bbb6af', - '500': '#968e84', - '600': '#746e66', - '700': '#5a554f', - '750': '#494540', - '800': '#3b3834', - '850': '#302e2a', - '900': '#252420', - '950': '#1f1e1b', - '975': '#191815', + '10': '#fdfcfcff', + '25': '#fafafaff', + '50': '#f8f7f7ff', + '75': '#f6f4f4ff', + '100': '#eeecebff', + '150': '#e7e4e2ff', + '200': '#dedbd8ff', + '300': '#d4d0ccff', + '400': '#bbb6afff', + '500': '#968e84ff', + '600': '#746e66ff', + '700': '#5a554fff', + '750': '#494540ff', + '800': '#3b3834ff', + '850': '#302e2aff', + '900': '#252420ff', + '950': '#1f1e1bff', + '975': '#191815ff', } as const export const Greens = { - '100': '#d4f7e3', - '200': '#a8efc6', - '300': '#32ce79', - '400': '#27b86c', - '500': '#1fa25e', - '600': '#167d4a', - '700': '#0f5c38', - '800': '#0b3d26', + '100': '#d4f7e3ff', + '200': '#a8efc6ff', + '300': '#32ce79ff', + '400': '#27b86cff', + '500': '#1fa25eff', + '600': '#167d4aff', + '700': '#0f5c38ff', + '800': '#0b3d26ff', } as const export const Reds = { - '200': '#ffd88b', - '300': '#ffc300', - '400': '#f77f00', - '500': '#ed242f', - '600': '#d41e26', - '700': '#b0151f', - '800': '#8c111c', + '200': '#ffd88bff', + '300': '#ffc300ff', + '400': '#f77f00ff', + '500': '#ed242fff', + '600': '#d41e26ff', + '700': '#b0151fff', + '800': '#8c111cff', } as const export const Blues = { - '50': '#fefaef', - '100': '#d5dbf0', - '200': '#acbef1', - '300': '#839ff2', - '400': '#5a81f3', - '500': '#3162f4', - '600': '#2c55d5', - '700': '#2747b5', - '800': '#223995', - '900': '#1d2c75', - '950': '#171e55', + '50': '#fefaefff', + '100': '#d5dbf0ff', + '200': '#acbef1ff', + '300': '#839ff2ff', + '400': '#5a81f3ff', + '500': '#3162f4ff', + '600': '#2c55d5ff', + '700': '#2747b5ff', + '800': '#223995ff', + '900': '#1d2c75ff', + '950': '#171e55ff', } as const export const Oranges = { - '50': '#f0ddd1', - '100': '#f3cfb9', - '200': '#f5bd98', - '300': '#f4ab7a', - '400': '#f49753', - '500': '#f77f00', - '600': '#d36c00', - '700': '#b15900', - '800': '#8f4700', - '900': '#6f3601', - '950': '#4e2708', + '50': '#f0ddd1ff', + '100': '#f3cfb9ff', + '200': '#f5bd98ff', + '300': '#f4ab7aff', + '400': '#f49753ff', + '500': '#f77f00ff', + '600': '#d36c00ff', + '700': '#b15900ff', + '800': '#8f4700ff', + '900': '#6f3601ff', + '950': '#4e2708ff', } as const export const Yellows = { - '50': '#fffbf5', - '100': '#fff9f0', - '200': '#fff1db', - '300': '#ffe6bd', - '400': '#ffd88b', - '500': '#ffc300', - '600': '#e0ab00', - '700': '#c19300', - '800': '#a37c0c', - '900': '#84671d', - '950': '#665223', + '50': '#fffbf5ff', + '100': '#fff9f0ff', + '200': '#fff1dbff', + '300': '#ffe6bdff', + '400': '#ffd88bff', + '500': '#ffc300ff', + '600': '#e0ab00ff', + '700': '#c19300ff', + '800': '#a37c0cff', + '900': '#84671dff', + '950': '#665223ff', } as const export const Violets = { - '50': '#efedfc', - '100': '#dbd9f7', - '200': '#c6c4f2', - '300': '#b0aeee', - '400': '#9997e2', - '500': '#6a68b7', - '600': '#5f5cae', - '700': '#554fa5', - '800': '#4a4395', - '900': '#3e3684', - '950': '#2f2862', + '50': '#efedfcff', + '100': '#dbd9f7ff', + '200': '#c6c4f2ff', + '300': '#b0aeeeff', + '400': '#9997e2ff', + '500': '#6a68b7ff', + '600': '#5f5caeff', + '700': '#554fa5ff', + '800': '#4a4395ff', + '900': '#3e3684ff', + '950': '#2f2862ff', } as const export const Spacing = { - '50': '0', - '75': '0.0625rem', // 1px - '100': '0.125rem', // 2px - '200': '0.25rem', // 4px - '300': '0.5rem', // 8px - '350': '0.875rem', // 14px - '400': '1rem', // 16px - '450': '1.25rem', // 20px - '500': '1.5rem', // 24px - '600': '2rem', // 32px - '700': '3rem', // 48px - '800': '4rem', // 64px + '50': undefined, + '75': '0.0625rem' /* 1px */, + '100': '0.125rem' /* 2px */, + '200': '0.25rem' /* 4px */, + '300': '0.5rem' /* 8px */, + '350': '0.875rem' /* 14px */, + '400': '1rem' /* 16px */, + '450': '1.25rem' /* 20px */, + '500': '1.5rem' /* 24px */, + '600': '2rem' /* 32px */, + '700': '3rem' /* 48px */, + '800': '4rem' /* 64px */, } as const export const Sizing = { - '10': '0.0625rem', // 1px - '25': '0.125rem', // 2px - '50': '0.25rem', // 4px - '100': '0.5rem', // 8px - '125': '0.75rem', // 12px - '150': '0.875rem', // 14px - '200': '1rem', // 16px - '250': '1.25rem', // 20px - '300': '1.5rem', // 24px - '350': '1.75rem', // 28px - '400': '2rem', // 32px + '10': '0.0625rem' /* 1px */, + '25': '0.125rem' /* 2px */, + '50': '0.25rem' /* 4px */, + '100': '0.5rem' /* 8px */, + '125': '0.75rem' /* 12px */, + '150': '0.875rem' /* 14px */, + '200': '1rem' /* 16px */, + '250': '1.25rem' /* 20px */, + '300': '1.5rem' /* 24px */, + '350': '1.75rem' /* 28px */, + '400': '2rem' /* 32px */, '450': '2.25rem', - '500': '2.5rem', // 40px - '600': '3rem', // 48px - '650': '3.5rem', // 56px - '700': '4rem', // 64px - '800': '5.5rem', // 88px + '500': '2.5rem' /* 40px */, + '600': '3rem' /* 48px */, + '650': '3.5rem' /* 56px */, + '700': '4rem' /* 64px */, + '800': '5.5rem' /* 88px */, } as const export const Duration = { @@ -140,5 +140,4 @@ export const Duration = { Focus: 50, Delay: 100, } - export const TransitionFunction = `ease-out ${Duration.Transition}ms` diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts index f1bc935d4..c38920b72 100644 --- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts +++ b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts @@ -1,52 +1,54 @@ import { Sizing, Spacing } from './0_primitives' const MappedSpacing = { - '3xs': { mobile: Spacing['75'], tablet: Spacing['75'], desktop: Spacing['75'] }, + '450': { mobile: Spacing['450'], tablet: Spacing['450'], desktop: Spacing['450'] }, + xs: { mobile: Spacing['200'], tablet: Spacing['200'], desktop: Spacing['200'] }, + sm: { mobile: Spacing['300'], tablet: Spacing['300'], desktop: Spacing['300'] }, + md: { mobile: Spacing['400'], tablet: Spacing['400'], desktop: Spacing['400'] }, + lg: { mobile: Spacing['500'], tablet: Spacing['500'], desktop: Spacing['500'] }, + xl: { mobile: Spacing['600'], tablet: Spacing['600'], desktop: Spacing['600'] }, + xxl: { mobile: Spacing['700'], tablet: Spacing['700'], desktop: Spacing['700'] }, xxs: { mobile: Spacing['100'], tablet: Spacing['100'], desktop: Spacing['100'] }, - xs: { mobile: Spacing['100'], tablet: Spacing['200'], desktop: Spacing['200'] }, - sm: { mobile: Spacing['200'], tablet: Spacing['300'], desktop: Spacing['300'] }, - md: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['400'] }, - lg: { mobile: Spacing['400'], tablet: Spacing['500'], desktop: Spacing['500'] }, - xl: { mobile: Spacing['500'], tablet: Spacing['600'], desktop: Spacing['600'] }, - xxl: { mobile: Spacing['600'], tablet: Spacing['700'], desktop: Spacing['700'] }, - '3xl': { mobile: Spacing['700'], tablet: Spacing['800'], desktop: Spacing['800'] }, + '3xl': { mobile: Spacing['800'], tablet: Spacing['800'], desktop: Spacing['800'] }, + '3xs': { mobile: Spacing['75'], tablet: Spacing['75'], desktop: Spacing['75'] }, } as const const MappedSizing = { - xxs: { mobile: Sizing['50'], tablet: Sizing['100'], desktop: Sizing['100'] }, - xs: { mobile: Sizing['150'], tablet: Sizing['200'], desktop: Sizing['200'] }, - sm: { mobile: Sizing['200'], tablet: Sizing['300'], desktop: Sizing['300'] }, - md: { mobile: Sizing['300'], tablet: Sizing['400'], desktop: Sizing['400'] }, - lg: { mobile: Sizing['400'], tablet: Sizing['500'], desktop: Sizing['500'] }, - xl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['600'] }, - xxl: { mobile: Sizing['600'], tablet: Sizing['700'], desktop: Sizing['700'] }, - '3xl': { mobile: Sizing['700'], tablet: Sizing['800'], desktop: Sizing['800'] }, + '450': { mobile: Sizing['450'], tablet: Sizing['450'], desktop: Sizing['450'] }, + xxs: { mobile: Sizing['100'], tablet: Sizing['100'], desktop: Sizing['100'] }, + xs: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, + sm: { mobile: Sizing['300'], tablet: Sizing['300'], desktop: Sizing['300'] }, + md: { mobile: Sizing['400'], tablet: Sizing['400'], desktop: Sizing['400'] }, + lg: { mobile: Sizing['500'], tablet: Sizing['500'], desktop: Sizing['500'] }, + xl: { mobile: Sizing['600'], tablet: Sizing['600'], desktop: Sizing['600'] }, + xxl: { mobile: Sizing['700'], tablet: Sizing['700'], desktop: Sizing['700'] }, + '3xl': { mobile: Sizing['800'], tablet: Sizing['800'], desktop: Sizing['800'] }, } as const const MappedIconSize = { - xxs: { mobile: Sizing['100'], tablet: Sizing['125'], desktop: Sizing['125'] }, - xs: { mobile: Sizing['125'], tablet: Sizing['150'], desktop: Sizing['150'] }, - sm: { mobile: Sizing['150'], tablet: Sizing['200'], desktop: Sizing['200'] }, + xxs: { mobile: Sizing['125'], tablet: Sizing['125'], desktop: Sizing['125'] }, + xs: { mobile: Sizing['150'], tablet: Sizing['150'], desktop: Sizing['150'] }, + sm: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, md: { mobile: Sizing['250'], tablet: Sizing['250'], desktop: Sizing['250'] }, - lg: { mobile: Sizing['300'], tablet: Sizing['350'], desktop: Sizing['350'] }, - xl: { mobile: Sizing['400'], tablet: Sizing['500'], desktop: Sizing['500'] }, - xxl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['600'] }, - '3xl': { mobile: Sizing['600'], tablet: Sizing['700'], desktop: Sizing['700'] }, - '4xl': { mobile: Sizing['700'], tablet: Sizing['800'], desktop: Sizing['800'] }, + lg: { mobile: Sizing['350'], tablet: Sizing['350'], desktop: Sizing['350'] }, + xl: { mobile: Sizing['500'], tablet: Sizing['500'], desktop: Sizing['500'] }, + xxl: { mobile: Sizing['600'], tablet: Sizing['600'], desktop: Sizing['600'] }, + '3xl': { mobile: Sizing['700'], tablet: Sizing['700'], desktop: Sizing['700'] }, + '4xl': { mobile: Sizing['800'], tablet: Sizing['800'], desktop: Sizing['800'] }, } as const const MappedGrid = { - Column_Spacing: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['500'] }, - Row_Spacing: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['500'] }, + Column_Spacing: { mobile: Spacing['400'], tablet: Spacing['400'], desktop: Spacing['400'] }, + Row_Spacing: { mobile: Spacing['400'], tablet: Spacing['400'], desktop: Spacing['400'] }, } as const const MappedFontSize = { xs: { mobile: Sizing['125'], tablet: Sizing['125'], desktop: Sizing['125'] }, sm: { mobile: Sizing['150'], tablet: Sizing['150'], desktop: Sizing['150'] }, md: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, - lg: { mobile: Sizing['250'], tablet: Sizing['300'], desktop: Sizing['300'] }, - xl: { mobile: Sizing['350'], tablet: Sizing['400'], desktop: Sizing['400'] }, - xxl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['700'] }, + lg: { mobile: Sizing['300'], tablet: Sizing['300'], desktop: Sizing['300'] }, + xl: { mobile: Sizing['400'], tablet: Sizing['400'], desktop: Sizing['400'] }, + xxl: { mobile: Sizing['600'], tablet: Sizing['600'], desktop: Sizing['600'] }, } as const const MappedButtonSize = { @@ -66,54 +68,30 @@ const SliderThumbWidth = { } as const const MappedFontWeight = { - Extra_Light: 200, + 'Extra light': 200, Light: 300, Normal: 400, Medium: 500, - Semi_Bold: 600, + 'Semi bold': 600, Bold: 700, - Extra_Bold: 800, + 'Extra bold': 800, } as const const MappedLineHeight = { - xs: { - mobile: '0.75rem', // 12px - tablet: '0.75rem', // 12px - desktop: '0.875rem', // 14px - }, - sm: { - mobile: '0.875rem', // 14px - tablet: '0.875rem', // 14px - desktop: '1rem', // 16px - }, - md: { - mobile: '1.5rem', // 24px - tablet: '1.5rem', // 24px - desktop: '1.5rem', // 24px - }, - lg: { - mobile: '1.5rem', // 24px - tablet: '1.5rem', // 24px - desktop: '2rem', // 32px - }, - xl: { - mobile: '2rem', // 32px - tablet: '2rem', // 32px - desktop: '2.5rem', // 40px - }, - xxl: { - mobile: '2.5rem', // 40px - tablet: '2.5rem', // 40px - desktop: '4rem', // 64px - }, + xs: { mobile: '0.75rem', /* 12px */ tablet: '0.75rem', /* 12px */ desktop: '0.75rem' /* 12px */ }, + sm: { mobile: '0.875rem', /* 14px */ tablet: '0.875rem', /* 14px */ desktop: '0.875rem' /* 14px */ }, + md: { mobile: '1.5rem', /* 24px */ tablet: '1.5rem', /* 24px */ desktop: '1.5rem' /* 24px */ }, + lg: { mobile: '1.5rem', /* 24px */ tablet: '1.5rem', /* 24px */ desktop: '1.5rem' /* 24px */ }, + xl: { mobile: '2rem', /* 32px */ tablet: '2rem', /* 32px */ desktop: '2rem' /* 32px */ }, + xxl: { mobile: '2.5rem', /* 40px */ tablet: '2.5rem', /* 40px */ desktop: '2.5rem' /* 40px */ }, } as const const MappedModalWidth = { - xs: '19rem', // 304px - sm: '24rem', // 384px - md: '28rem', // 448px - lg: '32rem', // 512px - xl: '36rem', // 576px + xs: '19rem' /* 304px */, + sm: '24rem' /* 384px */, + md: '28rem' /* 448px */, + lg: '32rem' /* 512px */, + xl: '36rem' /* 576px */, } const MappedModalHeight = { @@ -130,7 +108,7 @@ export const SizesAndSpaces = { FontSize: MappedFontSize, FontWeight: MappedFontWeight, LineHeight: MappedLineHeight, - OutlineWidth: '0.125rem', // 2px + OutlineWidth: '0.125rem' /* 2px */, Slider: { Height: SliderHeight, ThumbWidth: SliderThumbWidth }, Width: { modal: MappedModalWidth, column: MappedColumnWidth }, MinWidth: { tableHeader: '50rem', select: '5rem', actionCard: '20rem', twoCardLayout: 961 }, diff --git a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts index 0fe3ad6c3..c4ca2ae4f 100644 --- a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts +++ b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts @@ -2,107 +2,107 @@ import { Blues, Grays, Greens, Reds, Violets, Yellows, Oranges } from './0_primi function createLightSurfaces() { const Text = { - Primary: Grays['950'], - Secondary: Grays['700'], - Tertiary: Grays['500'], + Primary: Grays['50'], + Secondary: Grays['300'], + Tertiary: Grays['400'], + Highlight: Blues['300'], Disabled: Grays['500'], - Highlight: Blues['500'], Feedback: { - Success: Greens['600'], - Warning: Oranges['500'], Error: Reds['500'], + Warning: Oranges['500'], + Success: Greens['300'], Inverted: Grays['50'], }, FilledFeedback: { - info: { - primary: Blues['500'], - secondary: Grays['700'], + Info: { + Primary: Blues['300'], + Secondary: Grays['300'], }, - highlight: { - primary: Grays['50'], - secondary: Grays['300'], + Warning: { + Primary: Grays['25'], + Secondary: Grays['300'], }, - warning: { - primary: Grays['950'], - secondary: Grays['700'], + Alert: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - alert: { - primary: Grays['50'], - secondary: Grays['300'], + Highlight: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - success: { - primary: Grays['50'], - secondary: Grays['300'], + Success: { + Primary: Grays['950'], + Secondary: Grays['700'], }, }, } as const const Layer = { '1': { - Fill: Grays['50'], - Outline: Grays['300'], + Fill: Grays['950'], + Outline: Grays['600'], }, '2': { - Fill: Grays['100'], - Outline: Grays['200'], + Fill: Grays['900'], + Outline: Grays['750'], }, '3': { - Fill: Grays['50'], - Outline: Grays['300'], - }, - Feedback: { - Info: Blues['500'], - Success: Greens['600'], - Warning: Yellows['500'], - Error: Reds['500'], + Fill: Grays['750'], + Outline: Grays['600'], }, Highlight: Blues['500'], TypeAction: { - Selected: Blues['100'], - Hover: Grays['150'], + Selected: Grays['750'], + Hover: Grays['850'], + }, + Feedback: { + Info: Blues['800'], + Success: Greens['300'], + Warning: Oranges['500'], + Error: Reds['500'], }, } as const return { Text, Layer, Tables: { - Row: { - Default: Grays['50'], - Selected: Grays['150'], - Hover: Blues['100'], - }, Header: { - Fill: Grays['200'], + Fill: Grays['800'], Label: { - Default: Grays['700'], - Hover: Blues['500'], - Active: Grays['950'], + Default: Text.Primary, + Hover: Text.Highlight, + Active: Text.Secondary, }, }, + Row: { + Hover: Layer.TypeAction.Selected, + Selected: Layer.TypeAction.Hover, + Default: Layer['1'].Fill, + }, }, Badges: { + Border: { + Default: Grays['600'], + Active: Blues['400'], + Alert: Reds['500'], + Highlight: Blues['400'], + Warning: Oranges['500'], + Accent: Blues['400'], + }, Label: { - Default: Grays['950'], + Default: Text.Primary, Active: Grays['10'], Alert: Grays['10'], - Highlight: Blues['500'], + Highlight: Blues['400'], Warning: Grays['975'], Accent: Grays['10'], }, - Border: { - Default: Grays['400'], - Active: Blues['500'], - Alert: Reds['500'], - Highlight: Blues['500'], - Warning: Oranges['500'], - Accent: Blues['500'], - }, Fill: { - Default: Grays['50'], + Default: Layer['1'].Fill, Active: Greens['400'], Alert: Reds['500'], - Highlight: Grays['50'], + Highlight: Grays['10'], Warning: Yellows['500'], - Accent: Blues['500'], + Accent: Blues['400'], }, }, } as const @@ -110,107 +110,107 @@ function createLightSurfaces() { function createDarkSurfaces() { const Text = { - primary: Grays['50'], - secondary: Grays['300'], - tertiary: Grays['400'], + Primary: Grays['950'], + Secondary: Grays['750'], + Tertiary: Grays['700'], + Highlight: Blues['500'], Disabled: Grays['500'], - highlight: Blues['400'], + Feedback: { + Warning: Oranges['500'], + Success: Greens['600'], + Error: Reds['500'], + Inverted: Grays['950'], + }, FilledFeedback: { - info: { - primary: Blues['300'], - secondary: Grays['300'], + Info: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - highlight: { - primary: Blues['500'], - secondary: Grays['700'], + Highlight: { + Primary: Blues['300'], + Secondary: Grays['300'], }, - warning: { - primary: Grays['50'], - secondary: Grays['150'], + Warning: { + Primary: Grays['10'], + Secondary: Grays['200'], }, - alert: { - primary: Grays['50'], - secondary: Grays['300'], + Alert: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - success: { - primary: Grays['950'], - secondary: Grays['700'], + Success: { + Primary: Grays['950'], + Secondary: Grays['700'], }, }, - Feedback: { - Success: Greens['400'], - Warning: Yellows['500'], - Error: Reds['500'], - Inverted: Grays['950'], - }, } as const const Layer = { '1': { - Fill: Grays['950'], - Outline: Grays['900'], + Fill: Grays['75'], + Outline: Grays['300'], }, '2': { - Fill: Grays['900'], - Outline: Grays['800'], + Fill: Grays['100'], + Outline: Grays['200'], }, '3': { - Fill: Grays['800'], - Outline: Grays['700'], - }, - Feedback: { - Info: Blues['50'], - Success: Greens['300'], - Warning: Oranges['500'], - Error: Reds['500'], + Fill: Grays['50'], + Outline: Grays['300'], }, Highlight: Blues['50'], TypeAction: { - Selected: Blues['900'], - Hover: Grays['750'], + Selected: Blues['50'], + Hover: Blues['100'], + }, + Feedback: { + Info: Blues['500'], + Success: Greens['600'], + Warning: Yellows['500'], + Error: Reds['500'], }, } as const return { Text, Layer, Tables: { - Row: { - Default: Grays['950'], - Selected: Blues['900'], - Hover: Grays['750'], - }, Header: { - Fill: Grays['800'], + Fill: Grays['200'], Label: { - Default: Grays['300'], - Hover: Blues['400'], - Active: Grays['50'], + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, }, }, + Row: { + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + Default: Layer['1'].Fill, + }, }, Badges: { + Border: { + Default: Grays['400'], + Active: Blues['500'], + Alert: Reds['500'], + Highlight: Blues['500'], + Warning: Oranges['500'], + Accent: Blues['500'], + }, Label: { - Default: Grays['10'], + Default: Grays['975'], Active: Grays['10'], Alert: Grays['10'], - Highlight: Blues['400'], + Highlight: Blues['500'], Warning: Grays['975'], Accent: Grays['10'], }, - Border: { - Default: Grays['600'], - Active: Blues['400'], - Alert: Reds['500'], - Highlight: Blues['400'], - Warning: Oranges['500'], - Accent: Blues['400'], - }, Fill: { - Default: Grays['950'], + Default: Layer['1'].Fill, Active: Greens['500'], Alert: Reds['500'], - Highlight: Grays['950'], + Highlight: Layer['1'].Fill, Warning: Yellows['500'], - Accent: Blues['400'], + Accent: Blues['500'], }, }, } as const @@ -218,107 +218,107 @@ function createDarkSurfaces() { function createChadSurfaces() { const Text = { + Primary: Grays['50'], + Secondary: Grays['300'], + Tertiary: Grays['400'], + Highlight: Violets['400'], + Disabled: Grays['500'], Feedback: { - Warning: Oranges['500'], - Success: Greens['600'], + Warning: Yellows['500'], + Success: Greens['500'], Error: Reds['500'], Inverted: Grays['50'], }, FilledFeedback: { - info: { - primary: Violets['500'], - secondary: Grays['700'], + Info: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - highlight: { - primary: Grays['50'], - secondary: Grays['300'], + Highlight: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - warning: { - primary: Grays['950'], - secondary: Grays['700'], + Warning: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - alert: { - primary: Grays['50'], - secondary: Grays['300'], + Alert: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - success: { - primary: Grays['50'], - secondary: Grays['300'], + Success: { + Primary: Grays['950'], + Secondary: Grays['700'], }, }, - Primary: Grays['950'], - Secondary: Grays['750'], - Tertiary: Grays['700'], - Disabled: Grays['500'], - Highlight: Violets['600'], } as const const Layer = { '1': { - Fill: Grays['150'], - Outline: Grays['400'], + Fill: Violets['950'], + Outline: Violets['800'], }, '2': { - Fill: Grays['300'], - Outline: Grays['500'], + Fill: Violets['800'], + Outline: Violets['600'], }, '3': { - Fill: Grays['400'], - Outline: Grays['600'], + Fill: Violets['700'], + Outline: Violets['500'], + }, + Highlight: Violets['950'], + TypeAction: { + Selected: Violets['900'], + Hover: Violets['800'], }, Feedback: { - Info: Violets['700'], - Success: Greens['600'], - Warning: Yellows['500'], + Info: Grays['850'], + Success: Greens['300'], + Warning: Oranges['500'], Error: Reds['500'], }, - TypeAction: { - Selected: Violets['50'], - Hover: Violets['200'], - }, - Highlight: Violets['800'], } as const return { Text, Layer, Tables: { - Row: { - Default: Grays['150'], - Selected: Violets['50'], - Hover: Violets['200'], - }, Header: { - Fill: Grays['400'], + Fill: Layer['3'].Fill, Label: { - Default: Grays['750'], - Hover: Violets['600'], - Active: Grays['950'], + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, }, }, + Row: { + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + Default: Layer['1'].Fill, + }, }, Badges: { + Border: { + Default: Grays['600'], + Active: Violets['400'], + Alert: Reds['500'], + Highlight: Violets['200'], + Warning: Oranges['500'], + Accent: Violets['400'], + }, Label: { - Default: Grays['950'], + Default: Text.Primary, Active: Grays['10'], Alert: Grays['10'], - Highlight: Violets['800'], + Highlight: Violets['200'], Warning: Grays['975'], Accent: Grays['10'], }, - Border: { - Default: Grays['400'], - Active: Violets['500'], - Alert: Reds['500'], - Highlight: Violets['800'], - Warning: Oranges['500'], - Accent: Violets['800'], - }, Fill: { - Default: Grays['150'], + Default: Layer['1'].Fill, Active: Greens['500'], Alert: Reds['500'], - Highlight: Grays['150'], + Highlight: Layer['1'].Fill, Warning: Yellows['500'], - Accent: Violets['800'], + Accent: Violets['400'], }, }, } as const @@ -329,34 +329,34 @@ function createLightInvertedSurfaces() { Primary: Grays['50'], Secondary: Grays['300'], Tertiary: Grays['400'], - Disabled: Grays['500'], Highlight: Blues['300'], + Disabled: Grays['500'], Feedback: { - Success: Greens['300'], - Warning: Oranges['500'], Error: Reds['500'], + Warning: Oranges['500'], + Success: Greens['300'], Inverted: Grays['50'], }, FilledFeedback: { - info: { - primary: Blues['300'], - secondary: Grays['300'], + Info: { + Primary: Blues['300'], + Secondary: Grays['300'], }, - highlight: { - primary: Grays['950'], - secondary: Grays['700'], + Warning: { + Primary: Grays['25'], + Secondary: Grays['300'], }, - warning: { - primary: Grays['25'], - secondary: Grays['300'], + Alert: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - alert: { - primary: Grays['950'], - secondary: Grays['700'], + Highlight: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - success: { - primary: Grays['950'], - secondary: Grays['700'], + Success: { + Primary: Grays['950'], + Secondary: Grays['700'], }, }, } as const @@ -373,45 +373,37 @@ function createLightInvertedSurfaces() { Fill: Grays['750'], Outline: Grays['600'], }, + Highlight: Blues['500'], + TypeAction: { + Selected: Grays['750'], + Hover: Grays['850'], + }, Feedback: { Info: Blues['800'], Success: Greens['300'], Warning: Oranges['500'], Error: Reds['500'], }, - Highlight: Blues['500'], - TypeAction: { - Selected: Grays['750'], - Hover: Grays['850'], - }, } as const return { Text, Layer, Tables: { - Row: { - Default: Grays['950'], - Selected: Grays['850'], - Hover: Grays['750'], - }, Header: { Fill: Grays['800'], Label: { - Default: Grays['50'], - Hover: Blues['300'], - Active: Grays['300'], + Default: Text.Primary, + Hover: Text.Highlight, + Active: Text.Secondary, }, }, + Row: { + Hover: Layer.TypeAction.Selected, + Selected: Layer.TypeAction.Hover, + Default: Layer['1'].Fill, + }, }, Badges: { - Label: { - Default: Grays['50'], - Active: Grays['10'], - Alert: Grays['10'], - Highlight: Blues['400'], - Warning: Grays['975'], - Accent: Grays['10'], - }, Border: { Default: Grays['600'], Active: Blues['400'], @@ -420,8 +412,16 @@ function createLightInvertedSurfaces() { Warning: Oranges['500'], Accent: Blues['400'], }, + Label: { + Default: Text.Primary, + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['400'], + Warning: Grays['975'], + Accent: Grays['10'], + }, Fill: { - Default: Grays['950'], + Default: Layer['1'].Fill, Active: Greens['400'], Alert: Reds['500'], Highlight: Grays['10'], @@ -434,39 +434,39 @@ function createLightInvertedSurfaces() { function createDarkInvertedSurfaces() { const Text = { - primary: Grays['950'], - secondary: Grays['750'], - tertiary: Grays['700'], + Primary: Grays['950'], + Secondary: Grays['750'], + Tertiary: Grays['700'], + Highlight: Blues['500'], Disabled: Grays['500'], - highlight: Blues['500'], + Feedback: { + Warning: Oranges['500'], + Success: Greens['600'], + Error: Reds['500'], + Inverted: Grays['950'], + }, FilledFeedback: { - info: { - primary: Grays['950'], - secondary: Grays['700'], + Info: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - highlight: { - primary: Blues['300'], - secondary: Grays['300'], + Highlight: { + Primary: Blues['300'], + Secondary: Grays['300'], }, - warning: { - primary: Grays['950'], - secondary: Grays['700'], + Warning: { + Primary: Grays['10'], + Secondary: Grays['200'], }, - alert: { - primary: Grays['950'], - secondary: Grays['700'], + Alert: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - success: { - primary: Grays['950'], - secondary: Grays['700'], + Success: { + Primary: Grays['950'], + Secondary: Grays['700'], }, }, - Feedback: { - Success: Greens['600'], - Warning: Oranges['500'], - Error: Reds['500'], - Inverted: Grays['950'], - }, } as const const Layer = { '1': { @@ -481,45 +481,37 @@ function createDarkInvertedSurfaces() { Fill: Grays['50'], Outline: Grays['300'], }, + Highlight: Blues['50'], + TypeAction: { + Selected: Blues['50'], + Hover: Blues['100'], + }, Feedback: { Info: Blues['500'], Success: Greens['600'], Warning: Yellows['500'], Error: Reds['500'], }, - Highlight: Blues['50'], - TypeAction: { - Selected: Blues['50'], - Hover: Blues['100'], - }, } as const return { Text, Layer, Tables: { - Row: { - Default: Grays['75'], - Selected: Blues['50'], - Hover: Blues['100'], - }, Header: { Fill: Grays['200'], Label: { - Default: Grays['750'], - Hover: Blues['500'], - Active: Grays['950'], + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, }, }, + Row: { + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + Default: Layer['1'].Fill, + }, }, Badges: { - Label: { - Default: Grays['975'], - Active: Grays['10'], - Alert: Grays['10'], - Highlight: Blues['500'], - Warning: Grays['975'], - Accent: Grays['10'], - }, Border: { Default: Grays['400'], Active: Blues['500'], @@ -528,11 +520,19 @@ function createDarkInvertedSurfaces() { Warning: Oranges['500'], Accent: Blues['500'], }, + Label: { + Default: Grays['975'], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['500'], + Warning: Grays['975'], + Accent: Grays['10'], + }, Fill: { - Default: Grays['75'], + Default: Layer['1'].Fill, Active: Greens['500'], Alert: Reds['500'], - Highlight: Grays['75'], + Highlight: Layer['1'].Fill, Warning: Yellows['500'], Accent: Blues['500'], }, @@ -542,6 +542,11 @@ function createDarkInvertedSurfaces() { function createChadInvertedSurfaces() { const Text = { + Primary: Grays['50'], + Secondary: Grays['300'], + Tertiary: Grays['400'], + Highlight: Violets['400'], + Disabled: Grays['500'], Feedback: { Warning: Yellows['500'], Success: Greens['500'], @@ -549,32 +554,27 @@ function createChadInvertedSurfaces() { Inverted: Grays['50'], }, FilledFeedback: { - info: { - primary: Grays['950'], - secondary: Grays['700'], + Info: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - highlight: { - primary: Grays['950'], - secondary: Grays['700'], + Highlight: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - warning: { - primary: Grays['950'], - secondary: Grays['700'], + Warning: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - alert: { - primary: Grays['950'], - secondary: Grays['700'], + Alert: { + Primary: Grays['950'], + Secondary: Grays['700'], }, - success: { - primary: Grays['950'], - secondary: Grays['700'], + Success: { + Primary: Grays['950'], + Secondary: Grays['700'], }, }, - Primary: Grays['50'], - Secondary: Grays['300'], - Tertiary: Grays['400'], - Disabled: Grays['500'], - Highlight: Violets['400'], } as const const Layer = { '1': { @@ -589,45 +589,37 @@ function createChadInvertedSurfaces() { Fill: Violets['700'], Outline: Violets['500'], }, + Highlight: Violets['950'], + TypeAction: { + Selected: Violets['900'], + Hover: Violets['800'], + }, Feedback: { Info: Grays['850'], Success: Greens['300'], Warning: Oranges['500'], Error: Reds['500'], }, - TypeAction: { - Selected: Violets['900'], - Hover: Violets['800'], - }, - Highlight: Violets['950'], } as const return { Text, Layer, Tables: { - Row: { - Default: Violets['950'], - Selected: Violets['900'], - Hover: Violets['800'], - }, Header: { - Fill: Violets['700'], + Fill: Layer['3'].Fill, Label: { - Default: Grays['300'], - Hover: Violets['400'], - Active: Grays['50'], + Default: Text.Secondary, + Hover: Text.Highlight, + Active: Text.Primary, }, }, + Row: { + Selected: Layer.TypeAction.Selected, + Hover: Layer.TypeAction.Hover, + Default: Layer['1'].Fill, + }, }, Badges: { - Label: { - Default: Grays['50'], - Active: Grays['10'], - Alert: Grays['10'], - Highlight: Violets['200'], - Warning: Grays['975'], - Accent: Grays['10'], - }, Border: { Default: Grays['600'], Active: Violets['400'], @@ -636,11 +628,19 @@ function createChadInvertedSurfaces() { Warning: Oranges['500'], Accent: Violets['400'], }, + Label: { + Default: Text.Primary, + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Violets['200'], + Warning: Grays['975'], + Accent: Grays['10'], + }, Fill: { - Default: Violets['950'], + Default: Layer['1'].Fill, Active: Greens['500'], Alert: Reds['500'], - Highlight: Violets['950'], + Highlight: Layer['1'].Fill, Warning: Yellows['500'], Accent: Violets['400'], }, diff --git a/packages/curve-ui-kit/src/themes/design/2_theme.ts b/packages/curve-ui-kit/src/themes/design/2_theme.ts index 7fc9a4fd1..c0826b992 100644 --- a/packages/curve-ui-kit/src/themes/design/2_theme.ts +++ b/packages/curve-ui-kit/src/themes/design/2_theme.ts @@ -3,7 +3,6 @@ import { Blues, Grays, Greens, Reds, Yellows, Oranges, Violets, TransitionFuncti import { SurfacesAndText } from './1_surfaces_text' const { plain, inverted } = SurfacesAndText - const Transition = `all ${TransitionFunction}` const InsetOverline = '0 0 auto' as const const InsetUnderline = 'auto 0 0' as const @@ -41,17 +40,17 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li '975': Grays['975'], }, Primary: { - '50': Blues['50'], - '100': Blues['100'], - '200': Blues['200'], - '300': Blues['300'], - '400': Blues['400'], - '500': Blues['500'], - '600': Blues['600'], - '700': Blues['700'], - '800': Blues['800'], - '900': Blues['900'], - '950': Blues['950'], + '50': Violets['50'], + '100': Violets['100'], + '200': Violets['200'], + '300': Violets['300'], + '400': Violets['400'], + '500': Violets['500'], + '600': Violets['600'], + '700': Violets['700'], + '800': Violets['800'], + '900': Violets['900'], + '950': Violets['950'], }, Secondary: { '100': Greens['100'], @@ -70,96 +69,84 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li '600': Reds['500'], }, } as const - const Layer = { '1': { - Fill: Light.Layer['1'].Fill, - Outline: Light.Layer['1'].Outline, + Fill: plain.Chad.Layer['1'].Fill, + Outline: plain.Chad.Layer['1'].Outline, }, '2': { - Fill: Light.Layer['2'].Fill, - Outline: Light.Layer['2'].Outline, + Fill: plain.Chad.Layer['2'].Fill, + Outline: plain.Chad.Layer['2'].Outline, }, '3': { - Fill: Light.Layer['3'].Fill, - Outline: Light.Layer['3'].Outline, + Fill: plain.Chad.Layer['3'].Fill, + Outline: plain.Chad.Layer['3'].Outline, }, - App: { - Background: '#f0edeb', + Highlight: { + Outline: Color.Primary['500'], + Fill: plain.Chad.Layer.Highlight, }, - Feedback: { - Info: Light.Layer.Feedback.Info, - Success: Light.Layer.Feedback.Success, - Warning: Light.Layer.Feedback.Warning, - Error: Light.Layer.Feedback.Error, + App: { + Background: '#bdbbecff', }, TypeAction: { - Selected: Light.Layer.TypeAction.Selected, - Hover: Light.Layer.TypeAction.Hover, + Selected: plain.Chad.Layer.TypeAction.Selected, + Hover: plain.Chad.Layer.TypeAction.Hover, }, - Highlight: { - Fill: Light.Layer.Highlight, - Outline: Color.Primary['500'], + Feedback: { + Warning: plain.Chad.Layer.Feedback.Warning, + Success: plain.Chad.Layer.Feedback.Success, + Error: plain.Chad.Layer.Feedback.Error, + Info: plain.Chad.Layer.Feedback.Info, }, } as const - const Text = { TextColors: { - Primary: Light.Text.Primary, - Secondary: Light.Text.Secondary, - Tertiary: Light.Text.Tertiary, - Highlight: Light.Text.Highlight, - Disabled: Light.Text.Disabled, + Primary: plain.Chad.Text.Primary, + Secondary: plain.Chad.Text.Secondary, + Tertiary: plain.Chad.Text.Tertiary, + Highlight: plain.Chad.Text.Highlight, + Disabled: plain.Chad.Text.Disabled, + Feedback: { + Success: plain.Chad.Text.Feedback.Success, + Error: plain.Chad.Text.Feedback.Error, + Warning: plain.Chad.Text.Feedback.Warning, + }, FilledFeedback: { Info: { - Primary: Light.Text.FilledFeedback.info.primary, - Secondary: Light.Text.FilledFeedback.info.secondary, + Primary: plain.Chad.Text.FilledFeedback.Info.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Info.Secondary, }, Highlight: { - Primary: Light.Text.FilledFeedback.highlight.primary, - Secondary: Light.Text.FilledFeedback.highlight.secondary, + Primary: plain.Chad.Text.FilledFeedback.Highlight.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Highlight.Secondary, }, Warning: { - Primary: Light.Text.FilledFeedback.warning.primary, - Secondary: Light.Text.FilledFeedback.warning.secondary, + Primary: plain.Chad.Text.FilledFeedback.Warning.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Warning.Secondary, }, Alert: { - Primary: Light.Text.FilledFeedback.alert.primary, - Secondary: Light.Text.FilledFeedback.alert.secondary, + Primary: plain.Chad.Text.FilledFeedback.Alert.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Alert.Secondary, }, Success: { - Primary: Light.Text.FilledFeedback.success.primary, - Secondary: Light.Text.FilledFeedback.success.secondary, + Primary: plain.Chad.Text.FilledFeedback.Success.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Success.Secondary, }, }, - Feedback: { - Success: Light.Text.Feedback.Success, - Warning: Light.Text.Feedback.Warning, - Error: Light.Text.Feedback.Error, - Inverted: Grays['50'], - }, }, FontFamily: { - Heading: 'Mona Sans', - Body: 'Mona Sans', - Mono: 'Mona Sans', - Button: 'Mona Sans', + Heading: 'Minecraft', + Body: 'Hubot Sans', + Mono: 'Hubot Sans', + Button: 'Minecraft', }, } as const - const Button = { - Focus_Outline_Width: '0.125rem', // 2px - Focus_Outline: Color.Primary['500'], - Radius: { - xs: '0', - sm: '0', - md: '0', - lg: '0', - }, Primary: { Default: { Label: Grays['50'], - Fill: Blues['500'], + Fill: Violets['950'], }, Hover: { Label: Grays['50'], @@ -167,9 +154,11 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Color.Primary['100'], + Fill: Violets['200'], }, }, + Focus_Outline_Width: 2, + Focus_Outline: Color.Primary['600'], Secondary: { Default: { Label: Grays['50'], @@ -177,25 +166,11 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Hover: { Label: Grays['50'], - Fill: Blues['500'], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Color.Neutral['600'], - }, - }, - Outlined: { - Default: { - Label: Grays['950'], - Outline: Grays['300'], - }, - Hover: { - Label: Blues['500'], - Outline: Blues['500'], + Fill: Violets['500'], }, Disabled: { Label: Text.TextColors.Disabled, - Outline: Text.TextColors.Disabled, + Fill: Grays['600'], }, }, Ghost: { @@ -203,25 +178,31 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Label: Text.TextColors.Highlight, }, Hover: { - Label: Grays['975'], - Fill: Grays['900'], + Label: Violets['800'], + Fill: Violets['500'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Grays['500'], + Fill: Violets['200'], }, }, + Radius: { + Md: undefined, + Xs: undefined, + Sm: undefined, + Lg: undefined, + }, Success: { Default: { Label: Grays['900'], Fill: Greens['400'], }, Hover: { - Label: Greens['300'], + Label: Greens['500'], Fill: Grays['900'], }, Disabled: { - Label: Light.Text.Disabled, + Label: plain.Chad.Text.Disabled, Fill: Greens['600'], }, }, @@ -252,39 +233,52 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Fill: Layer.Highlight.Fill, }, }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['950'], + }, + Hover: { + Label: Violets['500'], + Outline: Violets['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Violets['200'], + }, + }, Transition: 'Transition', } as const - const Tabs = { - UnderLined: { - Container_Border: Light.Layer['1'].Outline, + Contained: { Default: { - Label: Text.TextColors.Secondary, - Outline: Layer['2'].Outline, + Label: plain.Chad.Text.FilledFeedback.Highlight.Secondary, + Fill: Color.Primary['950'], }, Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Label: Color.Neutral['50'], + Fill: Color.Primary['800'], }, Current: { Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, }, - Contained: { + UnderLined: { Default: { Label: Text.TextColors.Secondary, - Fill: Color.Neutral['300'], + Outline: Layer['2'].Outline, }, Hover: { - Label: Color.Neutral['50'], - Fill: Color.Neutral['900'], + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, Current: { Label: Text.TextColors.Primary, - Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, + 'Container border': Layer['1'].Outline, }, OverLined: { Default: { @@ -302,16 +296,15 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Transition: 'Transition', } as const - const Chips = { Default: { Label: Text.TextColors.Secondary, - Fill: Layer['2'].Fill, - Stroke: Light.Badges.Border.Default, + Fill: Layer['1'].Fill, + Stroke: plain.Chad.Badges.Border.Default, }, Hover: { Label: Color.Neutral['50'], - Fill: Color.Neutral['900'], + Fill: Color.Primary['950'], }, Current: { Label: Text.TextColors.Highlight, @@ -320,42 +313,36 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, BorderRadius: { Clickable: '0', - NonClickable: '6.25rem', // 100px + NonClickable: '6.25rem' /* 100px */, }, } as const - const Badges = { Border: { - Default: Light.Badges.Border.Default, - Active: Light.Badges.Border.Active, - Alert: Light.Badges.Border.Alert, - Highlight: Light.Badges.Border.Highlight, - Warning: Light.Badges.Border.Warning, - Accent: Light.Badges.Border.Accent, + Default: plain.Chad.Badges.Border.Default, + Active: plain.Chad.Badges.Border.Active, + Alert: plain.Chad.Badges.Border.Alert, + Highlight: plain.Chad.Badges.Border.Highlight, + Warning: plain.Chad.Badges.Border.Warning, + Accent: plain.Chad.Badges.Border.Accent, }, Label: { - Default: Light.Badges.Label.Default, - Active: Light.Badges.Label.Active, - Alert: Light.Badges.Label.Alert, - Highlight: Light.Badges.Label.Highlight, - Warning: Light.Badges.Label.Warning, - Accent: Light.Badges.Label.Accent, + Default: plain.Chad.Badges.Label.Default, + Active: plain.Chad.Badges.Label.Active, + Alert: plain.Chad.Badges.Label.Alert, + Highlight: plain.Chad.Badges.Label.Highlight, + Warning: plain.Chad.Badges.Label.Warning, + Accent: plain.Chad.Badges.Label.Accent, }, Fill: { - Default: Light.Badges.Fill.Default, - Active: Light.Badges.Fill.Active, - Alert: Light.Badges.Fill.Alert, - Highlight: Light.Badges.Fill.Highlight, - Warning: Light.Badges.Fill.Warning, - Accent: Light.Badges.Fill.Accent, + Default: plain.Chad.Badges.Fill.Default, + Active: plain.Chad.Badges.Fill.Active, + Alert: plain.Chad.Badges.Fill.Alert, + Highlight: plain.Chad.Badges.Fill.Highlight, + Warning: plain.Chad.Badges.Fill.Warning, + Accent: plain.Chad.Badges.Fill.Accent, }, } as const - const Chart = { - LiquidationZone: { - Current: Yellows['400'], - Future: Blues['200'], - }, Candles: { Positive: Greens['400'], Negative: Reds['600'], @@ -365,14 +352,17 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Negative: Reds['600'], Line1: Color.Primary['500'], Line2: Yellows['500'], - Line3: Color.Secondary['500'], + 'Line 3': Color.Secondary['500'], + }, + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], }, } as const - const Toggles = { Default: { Label: Text.TextColors.Primary, - Fill: Color.Neutral['100'], + Fill: Color.Primary['300'], }, Hover: { Label: Text.TextColors.Highlight, @@ -380,49 +370,46 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Current: { Label: Grays['50'], - Fill: Color.Neutral['900'], + Fill: Color.Primary['800'], }, } as const - const Table = { Header: { - Fill: Light.Tables.Header.Fill, - 'Label_&_icon': { - Default: Light.Tables.Header.Label.Default, - Hover: Light.Tables.Header.Label.Hover, - Active: Light.Tables.Header.Label.Active, + Fill: plain.Chad.Tables.Header.Fill, + Label: { + Default: plain.Chad.Tables.Header.Label.Default, + Hover: plain.Chad.Tables.Header.Label.Active, + Active: plain.Chad.Tables.Header.Label.Active, }, }, Row: { - Default: Light.Tables.Row.Default, - Selected: Light.Tables.Row.Selected, - Hover: Light.Tables.Row.Hover, + Default: plain.Chad.Tables.Row.Default, + Selected: plain.Chad.Tables.Row.Selected, + Hover: plain.Chad.Tables.Row.Hover, }, } as const - const InputBaseDefaultFill = Grays['100'] - const Inputs = { Base: { Default: { Fill: { Default: Grays['100'], - Active: Grays['50'], + Active: Grays['100'], }, Border: { Default: Grays['200'], - Active: Light.Text.Highlight, - Filled: Grays['850'], Error: Reds['500'], + Active: Violets['400'], + Filled: Violets['600'], }, }, Nested: { - Nested: Grays['10'], - Fill: Grays['100'], + Nested: Grays['50'], + Fill: Violets['50'], Border: { - Default: Grays['400'], - Active: Light.Text.Highlight, - Filled: Grays['850'], + Default: Grays['200'], + Active: Violets['400'], + Filled: Violets['400'], Error: Reds['500'], }, }, @@ -434,7 +421,6 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, }, } as const - const Sliders = { default: { SliderThumbImage: '/mui/slider-thumb-white.svg', @@ -446,9 +432,8 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - const Switch = { - Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Default: { Fill: Layer['1'].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const @@ -473,206 +458,188 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) => { const Color = { Neutral: { - '25': Grays['975'], - '50': Grays['950'], - '75': Grays['900'], - '100': Grays['850'], - '150': Grays['800'], - '200': Grays['750'], - '300': Grays['700'], - '400': Grays['600'], + '25': Grays['25'], + '50': Grays['50'], + '75': Grays['75'], + '100': Grays['100'], + '150': Grays['150'], + '200': Grays['200'], + '300': Grays['300'], + '400': Grays['400'], '500': Grays['500'], - '600': Grays['400'], - '700': Grays['300'], - '750': Grays['200'], - '800': Grays['150'], - '850': Grays['100'], - '900': Grays['75'], - '950': Grays['50'], - '975': Grays['25'], + '600': Grays['600'], + '700': Grays['700'], + '750': Grays['750'], + '800': Grays['800'], + '850': Grays['850'], + '900': Grays['900'], + '950': Grays['950'], + '975': Grays['975'], }, Primary: { - '50': Blues['950'], - '100': Blues['900'], - '200': Blues['800'], - '300': Blues['700'], - '400': Blues['600'], - '500': Blues['500'], - '600': Blues['400'], - '700': Blues['300'], - '800': Blues['200'], - '900': Blues['100'], - '950': Blues['50'], + '50': Violets['50'], + '100': Violets['100'], + '200': Violets['200'], + '300': Violets['300'], + '400': Violets['400'], + '500': Violets['500'], + '600': Violets['600'], + '700': Violets['700'], + '800': Violets['800'], + '900': Violets['900'], + '950': Violets['950'], }, Secondary: { - '100': Greens['800'], - '200': Greens['700'], - '300': Greens['600'], - '400': Greens['500'], - '500': Greens['400'], - '600': Greens['300'], - '700': Greens['200'], - '800': Greens['100'], + '100': Greens['100'], + '200': Greens['200'], + '300': Greens['300'], + '400': Greens['400'], + '500': Greens['500'], + '600': Greens['600'], + '700': Greens['700'], + '800': Greens['800'], }, Tertiary: { - '200': Reds['800'], - '300': Oranges['500'], - '400': Yellows['500'], - '600': Yellows['400'], + '200': Reds['200'], + '300': Yellows['500'], + '400': Oranges['500'], + '600': Reds['500'], }, } as const - const Layer = { '1': { - Fill: Dark.Layer['1'].Fill, - Outline: Dark.Layer['1'].Outline, + Fill: plain.Chad.Layer['1'].Fill, + Outline: plain.Chad.Layer['1'].Outline, }, '2': { - Fill: Dark.Layer['2'].Fill, - Outline: Dark.Layer['2'].Outline, + Fill: plain.Chad.Layer['2'].Fill, + Outline: plain.Chad.Layer['2'].Outline, }, '3': { - Fill: Dark.Layer['3'].Fill, - Outline: Dark.Layer['3'].Outline, + Fill: plain.Chad.Layer['3'].Fill, + Outline: plain.Chad.Layer['3'].Outline, }, - App: { - Background: '#12110f', + Highlight: { + Outline: Color.Primary['500'], + Fill: plain.Chad.Layer.Highlight, }, - Feedback: { - Info: Dark.Layer.Feedback.Info, - Success: Dark.Layer.Feedback.Success, - Warning: Dark.Layer.Feedback.Warning, - Error: Dark.Layer.Feedback.Error, + App: { + Background: '#bdbbecff', }, TypeAction: { - Selected: Dark.Layer.TypeAction.Selected, - Hover: Dark.Layer.TypeAction.Hover, + Selected: plain.Chad.Layer.TypeAction.Selected, + Hover: plain.Chad.Layer.TypeAction.Hover, }, - Highlight: { - Fill: Dark.Layer.Highlight, - Outline: Color.Primary['500'], + Feedback: { + Warning: plain.Chad.Layer.Feedback.Warning, + Success: plain.Chad.Layer.Feedback.Success, + Error: plain.Chad.Layer.Feedback.Error, + Info: plain.Chad.Layer.Feedback.Info, }, } as const - const Text = { TextColors: { - Primary: Dark.Text.primary, - Secondary: Dark.Text.secondary, - Tertiary: Dark.Text.tertiary, - Highlight: Dark.Text.highlight, - Disabled: Dark.Text.Disabled, + Primary: plain.Chad.Text.Primary, + Secondary: plain.Chad.Text.Secondary, + Tertiary: plain.Chad.Text.Tertiary, + Highlight: plain.Chad.Text.Highlight, + Disabled: plain.Chad.Text.Disabled, + Feedback: { + Success: plain.Chad.Text.Feedback.Success, + Error: plain.Chad.Text.Feedback.Error, + Warning: plain.Chad.Text.Feedback.Warning, + }, FilledFeedback: { Info: { - Primary: Dark.Text.FilledFeedback.info.primary, - Secondary: Dark.Text.FilledFeedback.info.secondary, + Primary: plain.Chad.Text.FilledFeedback.Info.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Info.Secondary, }, Highlight: { - Primary: Dark.Text.FilledFeedback.highlight.primary, - Secondary: Dark.Text.FilledFeedback.highlight.secondary, + Primary: plain.Chad.Text.FilledFeedback.Highlight.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Highlight.Secondary, }, Warning: { - Primary: Dark.Text.FilledFeedback.warning.primary, - Secondary: Dark.Text.FilledFeedback.warning.secondary, + Primary: plain.Chad.Text.FilledFeedback.Warning.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Warning.Secondary, }, Alert: { - Primary: Dark.Text.FilledFeedback.alert.primary, - Secondary: Dark.Text.FilledFeedback.alert.secondary, + Primary: plain.Chad.Text.FilledFeedback.Alert.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Alert.Secondary, }, Success: { - Primary: Dark.Text.FilledFeedback.success.primary, - Secondary: Dark.Text.FilledFeedback.success.secondary, + Primary: plain.Chad.Text.FilledFeedback.Success.Primary, + Secondary: plain.Chad.Text.FilledFeedback.Success.Secondary, }, }, - Feedback: { - Success: Dark.Text.Feedback.Success, - Warning: Dark.Text.Feedback.Warning, - Error: Dark.Text.Feedback.Error, - Inverted: Grays['950'], - }, }, FontFamily: { - Heading: 'Mona Sans', - Body: 'Mona Sans', - Mono: 'Mona Sans', - Button: 'Mona Sans', + Heading: 'Minecraft', + Body: 'Hubot Sans', + Mono: 'Hubot Sans', + Button: 'Minecraft', }, } as const - const Button = { - Focus_Outline_Width: '0.125rem', // 2px - Focus_Outline: Color.Primary['500'], - Radius: { - xs: '0', - sm: '0', - md: '0', - lg: '0', - }, Primary: { Default: { Label: Grays['50'], - Fill: Blues['500'], + Fill: Violets['950'], }, Hover: { - Label: Grays['900'], - Fill: Grays['50'], + Label: Grays['50'], + Fill: Grays['900'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Color.Primary['800'], + Fill: Violets['200'], }, }, + Focus_Outline_Width: 2, + Focus_Outline: Color.Primary['600'], Secondary: { - Default: { - Label: Grays['900'], - Fill: Grays['50'], - }, - Hover: { - Label: Grays['900'], - Fill: Blues['500'], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Fill: Color.Neutral['600'], - }, - }, - Outlined: { Default: { Label: Grays['50'], - Outline: Grays['700'], + Fill: Grays['900'], }, Hover: { - Label: Blues['500'], - Outline: Blues['500'], + Label: Grays['50'], + Fill: Violets['500'], }, Disabled: { Label: Text.TextColors.Disabled, - Outline: Text.TextColors.Disabled, + Fill: Grays['600'], }, }, Ghost: { Default: { - Label: Color.Primary['700'], + Label: Text.TextColors.Highlight, }, Hover: { - Label: Grays['50'], - Fill: Grays['50'], + Label: Violets['800'], + Fill: Violets['500'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Grays['850'], + Fill: Violets['200'], }, }, + Radius: { + Md: undefined, + Xs: undefined, + Sm: undefined, + Lg: undefined, + }, Success: { Default: { Label: Grays['900'], - Fill: Greens['300'], + Fill: Greens['400'], }, Hover: { Label: Greens['500'], - Fill: Grays['50'], + Fill: Grays['900'], }, Disabled: { - Label: Dark.Text.Disabled, + Label: plain.Chad.Text.Disabled, Fill: Greens['600'], }, }, @@ -703,39 +670,52 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) Fill: Layer.Highlight.Fill, }, }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['950'], + }, + Hover: { + Label: Violets['500'], + Outline: Violets['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Violets['200'], + }, + }, Transition: 'Transition', } as const - const Tabs = { - UnderLined: { - Container_Border: Dark.Layer['1'].Outline, + Contained: { Default: { - Label: Text.TextColors.Secondary, - Outline: Layer['2'].Outline, + Label: plain.Chad.Text.FilledFeedback.Highlight.Secondary, + Fill: Color.Primary['950'], }, Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Label: Color.Neutral['50'], + Fill: Color.Primary['800'], }, Current: { Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, }, - Contained: { + UnderLined: { Default: { Label: Text.TextColors.Secondary, - Fill: Color.Neutral['200'], + Outline: Layer['2'].Outline, }, Hover: { - Label: Color.Neutral['50'], - Fill: Color.Neutral['900'], + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, Current: { Label: Text.TextColors.Primary, - Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, + 'Container border': Layer['1'].Outline, }, OverLined: { Default: { @@ -753,139 +733,131 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) }, Transition: 'Transition', } as const - const Chips = { Default: { - Label: Text.TextColors.Primary, - Fill: Layer['2'].Fill, - Stroke: Dark.Badges.Border.Default, + Label: Text.TextColors.Secondary, + Fill: Layer['1'].Fill, + Stroke: plain.Chad.Badges.Border.Default, }, Hover: { Label: Color.Neutral['50'], - Fill: Color.Neutral['900'], + Fill: Color.Primary['950'], }, Current: { - Label: plain.Light.Text.Highlight, + Label: Text.TextColors.Highlight, Fill: Layer['2'].Fill, Outline: Layer.Highlight.Outline, }, BorderRadius: { Clickable: '0', - NonClickable: '6.25rem', // 100px + NonClickable: '6.25rem' /* 100px */, }, } as const - const Badges = { Border: { - Default: Dark.Badges.Border.Default, - Active: Dark.Badges.Border.Active, - Alert: Dark.Badges.Border.Alert, - Highlight: Dark.Badges.Border.Highlight, - Warning: Dark.Badges.Border.Warning, - Accent: Dark.Badges.Border.Accent, + Default: plain.Chad.Badges.Border.Default, + Active: plain.Chad.Badges.Border.Active, + Alert: plain.Chad.Badges.Border.Alert, + Highlight: plain.Chad.Badges.Border.Highlight, + Warning: plain.Chad.Badges.Border.Warning, + Accent: plain.Chad.Badges.Border.Accent, }, Label: { - Default: Dark.Badges.Label.Default, - Active: Dark.Badges.Label.Active, - Alert: Dark.Badges.Label.Alert, - Highlight: Dark.Badges.Label.Highlight, - Warning: Dark.Badges.Label.Warning, - Accent: Dark.Badges.Label.Accent, + Default: plain.Chad.Badges.Label.Default, + Active: plain.Chad.Badges.Label.Active, + Alert: plain.Chad.Badges.Label.Alert, + Highlight: plain.Chad.Badges.Label.Highlight, + Warning: plain.Chad.Badges.Label.Warning, + Accent: plain.Chad.Badges.Label.Accent, }, Fill: { - Default: Dark.Badges.Fill.Default, - Active: Dark.Badges.Fill.Active, - Alert: Dark.Badges.Fill.Alert, - Highlight: Dark.Badges.Fill.Highlight, - Warning: Dark.Badges.Fill.Warning, - Accent: Dark.Badges.Fill.Accent, + Default: plain.Chad.Badges.Fill.Default, + Active: plain.Chad.Badges.Fill.Active, + Alert: plain.Chad.Badges.Fill.Alert, + Highlight: plain.Chad.Badges.Fill.Highlight, + Warning: plain.Chad.Badges.Fill.Warning, + Accent: plain.Chad.Badges.Fill.Accent, }, } as const - const Chart = { - LiquidationZone: { - Current: Oranges['950'], - Future: Blues['800'], - }, Candles: { - Positive: Greens['300'], - Negative: Reds['500'], + Positive: Greens['400'], + Negative: Reds['600'], }, Lines: { - Positive: Greens['300'], - Negative: Reds['500'], + Positive: Greens['400'], + Negative: Reds['600'], Line1: Color.Primary['500'], Line2: Yellows['500'], - Line3: Color.Secondary['500'], + 'Line 3': Color.Secondary['500'], + }, + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], }, } as const - const Toggles = { Default: { Label: Text.TextColors.Primary, - Fill: Color.Neutral['100'], + Fill: Color.Primary['300'], }, Hover: { Label: Text.TextColors.Highlight, Fill: Layer['3'].Fill, }, Current: { - Label: Color.Neutral['50'], - Fill: Color.Neutral['950'], + Label: Grays['50'], + Fill: Color.Primary['800'], }, } as const - const Table = { Header: { - Fill: Dark.Tables.Header.Fill, - 'Label_&_icon': { - Default: Dark.Tables.Header.Label.Default, - Hover: Dark.Tables.Header.Label.Hover, - Active: Dark.Tables.Header.Label.Active, + Fill: plain.Chad.Tables.Header.Fill, + Label: { + Default: plain.Chad.Tables.Header.Label.Default, + Hover: plain.Chad.Tables.Header.Label.Active, + Active: plain.Chad.Tables.Header.Label.Active, }, }, Row: { - Default: Dark.Tables.Row.Default, - Selected: Dark.Tables.Row.Selected, - Hover: Dark.Tables.Row.Hover, + Default: plain.Chad.Tables.Row.Default, + Selected: plain.Chad.Tables.Row.Selected, + Hover: plain.Chad.Tables.Row.Hover, }, } as const - - const InputBaseDefaultFill = Grays['900'] - + const InputBaseDefaultFill = Grays['100'] const Inputs = { Base: { Default: { Fill: { - Default: Grays['900'], - Active: Grays['900'], + Default: Grays['100'], + Active: Grays['100'], }, Border: { - Default: Grays['800'], - Active: Dark.Text.highlight, - Filled: Grays['75'], + Default: Grays['200'], Error: Reds['500'], + Active: Violets['400'], + Filled: Violets['600'], }, }, Nested: { - Nested: Grays['850'], - Fill: Grays['850'], + Nested: Grays['50'], + Fill: Violets['50'], Border: { - Default: Grays['600'], - Active: Dark.Text.highlight, - Filled: Grays['75'], + Default: Grays['200'], + Active: Violets['400'], + Filled: Violets['400'], Error: Reds['500'], }, }, }, Large: { Default: { - Fill: Grays['900'], - Outline: Grays['800'], + Fill: Grays['100'], + Outline: Grays['200'], }, }, } as const - const Sliders = { default: { SliderThumbImage: '/mui/slider-thumb-blue.svg', @@ -897,9 +869,8 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - const Switch = { - Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Default: { Fill: Layer['1'].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const @@ -972,7 +943,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) '600': Reds['500'], }, } as const - const Layer = { '1': { Fill: Chad.Layer['1'].Fill, @@ -986,25 +956,24 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Chad.Layer['3'].Fill, Outline: Chad.Layer['3'].Outline, }, - App: { - Background: '#bdbbec', + Highlight: { + Outline: Color.Primary['500'], + Fill: Chad.Layer.Highlight, }, - Feedback: { - Info: Chad.Layer.Feedback.Info, - Success: Chad.Layer.Feedback.Success, - Warning: Chad.Layer.Feedback.Warning, - Error: Chad.Layer.Feedback.Error, + App: { + Background: '#bdbbecff', }, TypeAction: { Selected: Chad.Layer.TypeAction.Selected, Hover: Chad.Layer.TypeAction.Hover, }, - Highlight: { - Fill: Chad.Layer.Highlight, - Outline: Color.Primary['500'], + Feedback: { + Warning: Chad.Layer.Feedback.Warning, + Success: Chad.Layer.Feedback.Success, + Error: Chad.Layer.Feedback.Error, + Info: Chad.Layer.Feedback.Info, }, } as const - const Text = { TextColors: { Primary: Chad.Text.Primary, @@ -1012,34 +981,33 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Tertiary: Chad.Text.Tertiary, Highlight: Chad.Text.Highlight, Disabled: Chad.Text.Disabled, + Feedback: { + Success: Chad.Text.Feedback.Success, + Error: Chad.Text.Feedback.Error, + Warning: Chad.Text.Feedback.Warning, + }, FilledFeedback: { Info: { - Primary: Chad.Text.FilledFeedback.info.primary, - Secondary: Chad.Text.FilledFeedback.info.secondary, + Primary: Chad.Text.FilledFeedback.Info.Primary, + Secondary: Chad.Text.FilledFeedback.Info.Secondary, }, Highlight: { - Primary: Chad.Text.FilledFeedback.highlight.primary, - Secondary: Chad.Text.FilledFeedback.highlight.secondary, + Primary: Chad.Text.FilledFeedback.Highlight.Primary, + Secondary: Chad.Text.FilledFeedback.Highlight.Secondary, }, Warning: { - Primary: Chad.Text.FilledFeedback.warning.primary, - Secondary: Chad.Text.FilledFeedback.warning.secondary, + Primary: Chad.Text.FilledFeedback.Warning.Primary, + Secondary: Chad.Text.FilledFeedback.Warning.Secondary, }, Alert: { - Primary: Chad.Text.FilledFeedback.alert.primary, - Secondary: Chad.Text.FilledFeedback.alert.secondary, + Primary: Chad.Text.FilledFeedback.Alert.Primary, + Secondary: Chad.Text.FilledFeedback.Alert.Secondary, }, Success: { - Primary: Chad.Text.FilledFeedback.success.primary, - Secondary: Chad.Text.FilledFeedback.success.secondary, + Primary: Chad.Text.FilledFeedback.Success.Primary, + Secondary: Chad.Text.FilledFeedback.Success.Secondary, }, }, - Feedback: { - Success: Chad.Text.Feedback.Success, - Warning: Chad.Text.Feedback.Warning, - Error: Chad.Text.Feedback.Error, - Inverted: Grays['50'], - }, }, FontFamily: { Heading: 'Minecraft', @@ -1048,16 +1016,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Button: 'Minecraft', }, } as const - const Button = { - Focus_Outline_Width: '0.125rem', // 2px - Focus_Outline: Color.Primary['600'], - Radius: { - xs: '0', - sm: '0', - md: '0', - lg: '0', - }, Primary: { Default: { Label: Grays['50'], @@ -1072,6 +1031,8 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Violets['200'], }, }, + Focus_Outline_Width: 2, + Focus_Outline: Color.Primary['600'], Secondary: { Default: { Label: Grays['50'], @@ -1086,20 +1047,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Grays['600'], }, }, - Outlined: { - Default: { - Label: Grays['950'], - Outline: Grays['950'], - }, - Hover: { - Label: Violets['500'], - Outline: Violets['500'], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Violets['200'], - }, - }, Ghost: { Default: { Label: Text.TextColors.Highlight, @@ -1113,6 +1060,12 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Violets['200'], }, }, + Radius: { + Md: undefined, + Xs: undefined, + Sm: undefined, + Lg: undefined, + }, Success: { Default: { Label: Grays['900'], @@ -1154,39 +1107,52 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Layer.Highlight.Fill, }, }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['950'], + }, + Hover: { + Label: Violets['500'], + Outline: Violets['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Violets['200'], + }, + }, Transition: 'Transition', } as const - const Tabs = { - UnderLined: { - Container_Border: Layer['1'].Outline, + Contained: { Default: { - Label: Text.TextColors.Secondary, - Outline: Layer['2'].Outline, + Label: Chad.Text.FilledFeedback.Highlight.Secondary, + Fill: Color.Primary['950'], }, Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Label: Color.Neutral['50'], + Fill: Color.Primary['800'], }, Current: { Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, }, - Contained: { + UnderLined: { Default: { - Label: Chad.Text.FilledFeedback.highlight.secondary, - Fill: Color.Primary['950'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - Label: Color.Neutral['50'], - Fill: Color.Primary['800'], + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, Current: { Label: Text.TextColors.Primary, - Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, + 'Container border': Layer['1'].Outline, }, OverLined: { Default: { @@ -1204,7 +1170,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, Transition: 'Transition', } as const - const Chips = { Default: { Label: Text.TextColors.Secondary, @@ -1225,7 +1190,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) NonClickable: '0', }, } as const - const Badges = { Border: { Default: Chad.Badges.Border.Default, @@ -1252,12 +1216,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Accent: Chad.Badges.Fill.Accent, }, } as const - const Chart = { - LiquidationZone: { - Current: Yellows['400'], - Future: Blues['200'], - }, Candles: { Positive: Greens['400'], Negative: Reds['600'], @@ -1267,10 +1226,13 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Negative: Reds['600'], Line1: Color.Primary['500'], Line2: Yellows['500'], - Line3: Color.Secondary['500'], + 'Line 3': Color.Secondary['500'], + }, + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], }, } as const - const Toggles = { Default: { Label: Text.TextColors.Primary, @@ -1285,11 +1247,10 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Color.Primary['800'], }, } as const - const Table = { Header: { Fill: Chad.Tables.Header.Fill, - 'Label_&_icon': { + Label: { Default: Chad.Tables.Header.Label.Default, Hover: Chad.Tables.Header.Label.Active, Active: Chad.Tables.Header.Label.Active, @@ -1301,9 +1262,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Hover: Chad.Tables.Row.Hover, }, } as const - const InputBaseDefaultFill = Grays['100'] - const Inputs = { Base: { Default: { @@ -1313,9 +1272,9 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, Border: { Default: Grays['200'], + Error: Reds['500'], Active: Violets['400'], Filled: Violets['600'], - Error: Reds['500'], }, }, Nested: { @@ -1336,7 +1295,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, }, } as const - const Sliders = { default: { SliderThumbImage: '/mui/slider-thumb-white.svg', @@ -1348,9 +1306,8 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const - const Switch = { - Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Default: { Fill: Layer['1'].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const From d8bf51cab7817bfec4d74952545aecc8c5089c27 Mon Sep 17 00:00:00 2001 From: JustJousting Date: Tue, 25 Nov 2025 21:59:34 +0200 Subject: [PATCH 4/4] Revert "refactor: re-run figma json export with script to apply figma updates" This reverts commit c4e06f1f2dfa08f2e75227ba2378ea5957be709f. --- .../src/themes/design/0_primitives.ts | 211 ++--- .../src/themes/design/1_sizes_spaces.ts | 114 ++- .../src/themes/design/1_surfaces_text.ts | 616 ++++++------- .../curve-ui-kit/src/themes/design/2_theme.ts | 833 +++++++++--------- 4 files changed, 920 insertions(+), 854 deletions(-) diff --git a/packages/curve-ui-kit/src/themes/design/0_primitives.ts b/packages/curve-ui-kit/src/themes/design/0_primitives.ts index bcab3b552..75c9e9713 100644 --- a/packages/curve-ui-kit/src/themes/design/0_primitives.ts +++ b/packages/curve-ui-kit/src/themes/design/0_primitives.ts @@ -1,134 +1,134 @@ export const Grays = { - '10': '#fdfcfcff', - '25': '#fafafaff', - '50': '#f8f7f7ff', - '75': '#f6f4f4ff', - '100': '#eeecebff', - '150': '#e7e4e2ff', - '200': '#dedbd8ff', - '300': '#d4d0ccff', - '400': '#bbb6afff', - '500': '#968e84ff', - '600': '#746e66ff', - '700': '#5a554fff', - '750': '#494540ff', - '800': '#3b3834ff', - '850': '#302e2aff', - '900': '#252420ff', - '950': '#1f1e1bff', - '975': '#191815ff', + '10': '#fdfcfc', + '25': '#fafafa', + '50': '#f8f7f7', + '75': '#f6f4f4', + '100': '#eeeceb', + '150': '#e7e4e2', + '200': '#dedbd8', + '300': '#d4d0cc', + '400': '#bbb6af', + '500': '#968e84', + '600': '#746e66', + '700': '#5a554f', + '750': '#494540', + '800': '#3b3834', + '850': '#302e2a', + '900': '#252420', + '950': '#1f1e1b', + '975': '#191815', } as const export const Greens = { - '100': '#d4f7e3ff', - '200': '#a8efc6ff', - '300': '#32ce79ff', - '400': '#27b86cff', - '500': '#1fa25eff', - '600': '#167d4aff', - '700': '#0f5c38ff', - '800': '#0b3d26ff', + '100': '#d4f7e3', + '200': '#a8efc6', + '300': '#32ce79', + '400': '#27b86c', + '500': '#1fa25e', + '600': '#167d4a', + '700': '#0f5c38', + '800': '#0b3d26', } as const export const Reds = { - '200': '#ffd88bff', - '300': '#ffc300ff', - '400': '#f77f00ff', - '500': '#ed242fff', - '600': '#d41e26ff', - '700': '#b0151fff', - '800': '#8c111cff', + '200': '#ffd88b', + '300': '#ffc300', + '400': '#f77f00', + '500': '#ed242f', + '600': '#d41e26', + '700': '#b0151f', + '800': '#8c111c', } as const export const Blues = { - '50': '#fefaefff', - '100': '#d5dbf0ff', - '200': '#acbef1ff', - '300': '#839ff2ff', - '400': '#5a81f3ff', - '500': '#3162f4ff', - '600': '#2c55d5ff', - '700': '#2747b5ff', - '800': '#223995ff', - '900': '#1d2c75ff', - '950': '#171e55ff', + '50': '#fefaef', + '100': '#d5dbf0', + '200': '#acbef1', + '300': '#839ff2', + '400': '#5a81f3', + '500': '#3162f4', + '600': '#2c55d5', + '700': '#2747b5', + '800': '#223995', + '900': '#1d2c75', + '950': '#171e55', } as const export const Oranges = { - '50': '#f0ddd1ff', - '100': '#f3cfb9ff', - '200': '#f5bd98ff', - '300': '#f4ab7aff', - '400': '#f49753ff', - '500': '#f77f00ff', - '600': '#d36c00ff', - '700': '#b15900ff', - '800': '#8f4700ff', - '900': '#6f3601ff', - '950': '#4e2708ff', + '50': '#f0ddd1', + '100': '#f3cfb9', + '200': '#f5bd98', + '300': '#f4ab7a', + '400': '#f49753', + '500': '#f77f00', + '600': '#d36c00', + '700': '#b15900', + '800': '#8f4700', + '900': '#6f3601', + '950': '#4e2708', } as const export const Yellows = { - '50': '#fffbf5ff', - '100': '#fff9f0ff', - '200': '#fff1dbff', - '300': '#ffe6bdff', - '400': '#ffd88bff', - '500': '#ffc300ff', - '600': '#e0ab00ff', - '700': '#c19300ff', - '800': '#a37c0cff', - '900': '#84671dff', - '950': '#665223ff', + '50': '#fffbf5', + '100': '#fff9f0', + '200': '#fff1db', + '300': '#ffe6bd', + '400': '#ffd88b', + '500': '#ffc300', + '600': '#e0ab00', + '700': '#c19300', + '800': '#a37c0c', + '900': '#84671d', + '950': '#665223', } as const export const Violets = { - '50': '#efedfcff', - '100': '#dbd9f7ff', - '200': '#c6c4f2ff', - '300': '#b0aeeeff', - '400': '#9997e2ff', - '500': '#6a68b7ff', - '600': '#5f5caeff', - '700': '#554fa5ff', - '800': '#4a4395ff', - '900': '#3e3684ff', - '950': '#2f2862ff', + '50': '#efedfc', + '100': '#dbd9f7', + '200': '#c6c4f2', + '300': '#b0aeee', + '400': '#9997e2', + '500': '#6a68b7', + '600': '#5f5cae', + '700': '#554fa5', + '800': '#4a4395', + '900': '#3e3684', + '950': '#2f2862', } as const export const Spacing = { - '50': undefined, - '75': '0.0625rem' /* 1px */, - '100': '0.125rem' /* 2px */, - '200': '0.25rem' /* 4px */, - '300': '0.5rem' /* 8px */, - '350': '0.875rem' /* 14px */, - '400': '1rem' /* 16px */, - '450': '1.25rem' /* 20px */, - '500': '1.5rem' /* 24px */, - '600': '2rem' /* 32px */, - '700': '3rem' /* 48px */, - '800': '4rem' /* 64px */, + '50': '0', + '75': '0.0625rem', // 1px + '100': '0.125rem', // 2px + '200': '0.25rem', // 4px + '300': '0.5rem', // 8px + '350': '0.875rem', // 14px + '400': '1rem', // 16px + '450': '1.25rem', // 20px + '500': '1.5rem', // 24px + '600': '2rem', // 32px + '700': '3rem', // 48px + '800': '4rem', // 64px } as const export const Sizing = { - '10': '0.0625rem' /* 1px */, - '25': '0.125rem' /* 2px */, - '50': '0.25rem' /* 4px */, - '100': '0.5rem' /* 8px */, - '125': '0.75rem' /* 12px */, - '150': '0.875rem' /* 14px */, - '200': '1rem' /* 16px */, - '250': '1.25rem' /* 20px */, - '300': '1.5rem' /* 24px */, - '350': '1.75rem' /* 28px */, - '400': '2rem' /* 32px */, + '10': '0.0625rem', // 1px + '25': '0.125rem', // 2px + '50': '0.25rem', // 4px + '100': '0.5rem', // 8px + '125': '0.75rem', // 12px + '150': '0.875rem', // 14px + '200': '1rem', // 16px + '250': '1.25rem', // 20px + '300': '1.5rem', // 24px + '350': '1.75rem', // 28px + '400': '2rem', // 32px '450': '2.25rem', - '500': '2.5rem' /* 40px */, - '600': '3rem' /* 48px */, - '650': '3.5rem' /* 56px */, - '700': '4rem' /* 64px */, - '800': '5.5rem' /* 88px */, + '500': '2.5rem', // 40px + '600': '3rem', // 48px + '650': '3.5rem', // 56px + '700': '4rem', // 64px + '800': '5.5rem', // 88px } as const export const Duration = { @@ -140,4 +140,5 @@ export const Duration = { Focus: 50, Delay: 100, } + export const TransitionFunction = `ease-out ${Duration.Transition}ms` diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts index c38920b72..f1bc935d4 100644 --- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts +++ b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts @@ -1,54 +1,52 @@ import { Sizing, Spacing } from './0_primitives' const MappedSpacing = { - '450': { mobile: Spacing['450'], tablet: Spacing['450'], desktop: Spacing['450'] }, - xs: { mobile: Spacing['200'], tablet: Spacing['200'], desktop: Spacing['200'] }, - sm: { mobile: Spacing['300'], tablet: Spacing['300'], desktop: Spacing['300'] }, - md: { mobile: Spacing['400'], tablet: Spacing['400'], desktop: Spacing['400'] }, - lg: { mobile: Spacing['500'], tablet: Spacing['500'], desktop: Spacing['500'] }, - xl: { mobile: Spacing['600'], tablet: Spacing['600'], desktop: Spacing['600'] }, - xxl: { mobile: Spacing['700'], tablet: Spacing['700'], desktop: Spacing['700'] }, - xxs: { mobile: Spacing['100'], tablet: Spacing['100'], desktop: Spacing['100'] }, - '3xl': { mobile: Spacing['800'], tablet: Spacing['800'], desktop: Spacing['800'] }, '3xs': { mobile: Spacing['75'], tablet: Spacing['75'], desktop: Spacing['75'] }, + xxs: { mobile: Spacing['100'], tablet: Spacing['100'], desktop: Spacing['100'] }, + xs: { mobile: Spacing['100'], tablet: Spacing['200'], desktop: Spacing['200'] }, + sm: { mobile: Spacing['200'], tablet: Spacing['300'], desktop: Spacing['300'] }, + md: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['400'] }, + lg: { mobile: Spacing['400'], tablet: Spacing['500'], desktop: Spacing['500'] }, + xl: { mobile: Spacing['500'], tablet: Spacing['600'], desktop: Spacing['600'] }, + xxl: { mobile: Spacing['600'], tablet: Spacing['700'], desktop: Spacing['700'] }, + '3xl': { mobile: Spacing['700'], tablet: Spacing['800'], desktop: Spacing['800'] }, } as const const MappedSizing = { - '450': { mobile: Sizing['450'], tablet: Sizing['450'], desktop: Sizing['450'] }, - xxs: { mobile: Sizing['100'], tablet: Sizing['100'], desktop: Sizing['100'] }, - xs: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, - sm: { mobile: Sizing['300'], tablet: Sizing['300'], desktop: Sizing['300'] }, - md: { mobile: Sizing['400'], tablet: Sizing['400'], desktop: Sizing['400'] }, - lg: { mobile: Sizing['500'], tablet: Sizing['500'], desktop: Sizing['500'] }, - xl: { mobile: Sizing['600'], tablet: Sizing['600'], desktop: Sizing['600'] }, - xxl: { mobile: Sizing['700'], tablet: Sizing['700'], desktop: Sizing['700'] }, - '3xl': { mobile: Sizing['800'], tablet: Sizing['800'], desktop: Sizing['800'] }, + xxs: { mobile: Sizing['50'], tablet: Sizing['100'], desktop: Sizing['100'] }, + xs: { mobile: Sizing['150'], tablet: Sizing['200'], desktop: Sizing['200'] }, + sm: { mobile: Sizing['200'], tablet: Sizing['300'], desktop: Sizing['300'] }, + md: { mobile: Sizing['300'], tablet: Sizing['400'], desktop: Sizing['400'] }, + lg: { mobile: Sizing['400'], tablet: Sizing['500'], desktop: Sizing['500'] }, + xl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['600'] }, + xxl: { mobile: Sizing['600'], tablet: Sizing['700'], desktop: Sizing['700'] }, + '3xl': { mobile: Sizing['700'], tablet: Sizing['800'], desktop: Sizing['800'] }, } as const const MappedIconSize = { - xxs: { mobile: Sizing['125'], tablet: Sizing['125'], desktop: Sizing['125'] }, - xs: { mobile: Sizing['150'], tablet: Sizing['150'], desktop: Sizing['150'] }, - sm: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, + xxs: { mobile: Sizing['100'], tablet: Sizing['125'], desktop: Sizing['125'] }, + xs: { mobile: Sizing['125'], tablet: Sizing['150'], desktop: Sizing['150'] }, + sm: { mobile: Sizing['150'], tablet: Sizing['200'], desktop: Sizing['200'] }, md: { mobile: Sizing['250'], tablet: Sizing['250'], desktop: Sizing['250'] }, - lg: { mobile: Sizing['350'], tablet: Sizing['350'], desktop: Sizing['350'] }, - xl: { mobile: Sizing['500'], tablet: Sizing['500'], desktop: Sizing['500'] }, - xxl: { mobile: Sizing['600'], tablet: Sizing['600'], desktop: Sizing['600'] }, - '3xl': { mobile: Sizing['700'], tablet: Sizing['700'], desktop: Sizing['700'] }, - '4xl': { mobile: Sizing['800'], tablet: Sizing['800'], desktop: Sizing['800'] }, + lg: { mobile: Sizing['300'], tablet: Sizing['350'], desktop: Sizing['350'] }, + xl: { mobile: Sizing['400'], tablet: Sizing['500'], desktop: Sizing['500'] }, + xxl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['600'] }, + '3xl': { mobile: Sizing['600'], tablet: Sizing['700'], desktop: Sizing['700'] }, + '4xl': { mobile: Sizing['700'], tablet: Sizing['800'], desktop: Sizing['800'] }, } as const const MappedGrid = { - Column_Spacing: { mobile: Spacing['400'], tablet: Spacing['400'], desktop: Spacing['400'] }, - Row_Spacing: { mobile: Spacing['400'], tablet: Spacing['400'], desktop: Spacing['400'] }, + Column_Spacing: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['500'] }, + Row_Spacing: { mobile: Spacing['300'], tablet: Spacing['400'], desktop: Spacing['500'] }, } as const const MappedFontSize = { xs: { mobile: Sizing['125'], tablet: Sizing['125'], desktop: Sizing['125'] }, sm: { mobile: Sizing['150'], tablet: Sizing['150'], desktop: Sizing['150'] }, md: { mobile: Sizing['200'], tablet: Sizing['200'], desktop: Sizing['200'] }, - lg: { mobile: Sizing['300'], tablet: Sizing['300'], desktop: Sizing['300'] }, - xl: { mobile: Sizing['400'], tablet: Sizing['400'], desktop: Sizing['400'] }, - xxl: { mobile: Sizing['600'], tablet: Sizing['600'], desktop: Sizing['600'] }, + lg: { mobile: Sizing['250'], tablet: Sizing['300'], desktop: Sizing['300'] }, + xl: { mobile: Sizing['350'], tablet: Sizing['400'], desktop: Sizing['400'] }, + xxl: { mobile: Sizing['500'], tablet: Sizing['600'], desktop: Sizing['700'] }, } as const const MappedButtonSize = { @@ -68,30 +66,54 @@ const SliderThumbWidth = { } as const const MappedFontWeight = { - 'Extra light': 200, + Extra_Light: 200, Light: 300, Normal: 400, Medium: 500, - 'Semi bold': 600, + Semi_Bold: 600, Bold: 700, - 'Extra bold': 800, + Extra_Bold: 800, } as const const MappedLineHeight = { - xs: { mobile: '0.75rem', /* 12px */ tablet: '0.75rem', /* 12px */ desktop: '0.75rem' /* 12px */ }, - sm: { mobile: '0.875rem', /* 14px */ tablet: '0.875rem', /* 14px */ desktop: '0.875rem' /* 14px */ }, - md: { mobile: '1.5rem', /* 24px */ tablet: '1.5rem', /* 24px */ desktop: '1.5rem' /* 24px */ }, - lg: { mobile: '1.5rem', /* 24px */ tablet: '1.5rem', /* 24px */ desktop: '1.5rem' /* 24px */ }, - xl: { mobile: '2rem', /* 32px */ tablet: '2rem', /* 32px */ desktop: '2rem' /* 32px */ }, - xxl: { mobile: '2.5rem', /* 40px */ tablet: '2.5rem', /* 40px */ desktop: '2.5rem' /* 40px */ }, + xs: { + mobile: '0.75rem', // 12px + tablet: '0.75rem', // 12px + desktop: '0.875rem', // 14px + }, + sm: { + mobile: '0.875rem', // 14px + tablet: '0.875rem', // 14px + desktop: '1rem', // 16px + }, + md: { + mobile: '1.5rem', // 24px + tablet: '1.5rem', // 24px + desktop: '1.5rem', // 24px + }, + lg: { + mobile: '1.5rem', // 24px + tablet: '1.5rem', // 24px + desktop: '2rem', // 32px + }, + xl: { + mobile: '2rem', // 32px + tablet: '2rem', // 32px + desktop: '2.5rem', // 40px + }, + xxl: { + mobile: '2.5rem', // 40px + tablet: '2.5rem', // 40px + desktop: '4rem', // 64px + }, } as const const MappedModalWidth = { - xs: '19rem' /* 304px */, - sm: '24rem' /* 384px */, - md: '28rem' /* 448px */, - lg: '32rem' /* 512px */, - xl: '36rem' /* 576px */, + xs: '19rem', // 304px + sm: '24rem', // 384px + md: '28rem', // 448px + lg: '32rem', // 512px + xl: '36rem', // 576px } const MappedModalHeight = { @@ -108,7 +130,7 @@ export const SizesAndSpaces = { FontSize: MappedFontSize, FontWeight: MappedFontWeight, LineHeight: MappedLineHeight, - OutlineWidth: '0.125rem' /* 2px */, + OutlineWidth: '0.125rem', // 2px Slider: { Height: SliderHeight, ThumbWidth: SliderThumbWidth }, Width: { modal: MappedModalWidth, column: MappedColumnWidth }, MinWidth: { tableHeader: '50rem', select: '5rem', actionCard: '20rem', twoCardLayout: 961 }, diff --git a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts index c4ca2ae4f..0fe3ad6c3 100644 --- a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts +++ b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts @@ -2,107 +2,107 @@ import { Blues, Grays, Greens, Reds, Violets, Yellows, Oranges } from './0_primi function createLightSurfaces() { const Text = { - Primary: Grays['50'], - Secondary: Grays['300'], - Tertiary: Grays['400'], - Highlight: Blues['300'], + Primary: Grays['950'], + Secondary: Grays['700'], + Tertiary: Grays['500'], Disabled: Grays['500'], + Highlight: Blues['500'], Feedback: { - Error: Reds['500'], + Success: Greens['600'], Warning: Oranges['500'], - Success: Greens['300'], + Error: Reds['500'], Inverted: Grays['50'], }, FilledFeedback: { - Info: { - Primary: Blues['300'], - Secondary: Grays['300'], + info: { + primary: Blues['500'], + secondary: Grays['700'], }, - Warning: { - Primary: Grays['25'], - Secondary: Grays['300'], + highlight: { + primary: Grays['50'], + secondary: Grays['300'], }, - Alert: { - Primary: Grays['950'], - Secondary: Grays['700'], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Highlight: { - Primary: Grays['950'], - Secondary: Grays['700'], + alert: { + primary: Grays['50'], + secondary: Grays['300'], }, - Success: { - Primary: Grays['950'], - Secondary: Grays['700'], + success: { + primary: Grays['50'], + secondary: Grays['300'], }, }, } as const const Layer = { '1': { - Fill: Grays['950'], - Outline: Grays['600'], + Fill: Grays['50'], + Outline: Grays['300'], }, '2': { - Fill: Grays['900'], - Outline: Grays['750'], + Fill: Grays['100'], + Outline: Grays['200'], }, '3': { - Fill: Grays['750'], - Outline: Grays['600'], - }, - Highlight: Blues['500'], - TypeAction: { - Selected: Grays['750'], - Hover: Grays['850'], + Fill: Grays['50'], + Outline: Grays['300'], }, Feedback: { - Info: Blues['800'], - Success: Greens['300'], - Warning: Oranges['500'], + Info: Blues['500'], + Success: Greens['600'], + Warning: Yellows['500'], Error: Reds['500'], }, + Highlight: Blues['500'], + TypeAction: { + Selected: Blues['100'], + Hover: Grays['150'], + }, } as const return { Text, Layer, Tables: { + Row: { + Default: Grays['50'], + Selected: Grays['150'], + Hover: Blues['100'], + }, Header: { - Fill: Grays['800'], + Fill: Grays['200'], Label: { - Default: Text.Primary, - Hover: Text.Highlight, - Active: Text.Secondary, + Default: Grays['700'], + Hover: Blues['500'], + Active: Grays['950'], }, }, - Row: { - Hover: Layer.TypeAction.Selected, - Selected: Layer.TypeAction.Hover, - Default: Layer['1'].Fill, - }, }, Badges: { - Border: { - Default: Grays['600'], - Active: Blues['400'], - Alert: Reds['500'], - Highlight: Blues['400'], - Warning: Oranges['500'], - Accent: Blues['400'], - }, Label: { - Default: Text.Primary, + Default: Grays['950'], Active: Grays['10'], Alert: Grays['10'], - Highlight: Blues['400'], + Highlight: Blues['500'], Warning: Grays['975'], Accent: Grays['10'], }, + Border: { + Default: Grays['400'], + Active: Blues['500'], + Alert: Reds['500'], + Highlight: Blues['500'], + Warning: Oranges['500'], + Accent: Blues['500'], + }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['50'], Active: Greens['400'], Alert: Reds['500'], - Highlight: Grays['10'], + Highlight: Grays['50'], Warning: Yellows['500'], - Accent: Blues['400'], + Accent: Blues['500'], }, }, } as const @@ -110,107 +110,107 @@ function createLightSurfaces() { function createDarkSurfaces() { const Text = { - Primary: Grays['950'], - Secondary: Grays['750'], - Tertiary: Grays['700'], - Highlight: Blues['500'], + primary: Grays['50'], + secondary: Grays['300'], + tertiary: Grays['400'], Disabled: Grays['500'], - Feedback: { - Warning: Oranges['500'], - Success: Greens['600'], - Error: Reds['500'], - Inverted: Grays['950'], - }, + highlight: Blues['400'], FilledFeedback: { - Info: { - Primary: Grays['950'], - Secondary: Grays['700'], + info: { + primary: Blues['300'], + secondary: Grays['300'], }, - Highlight: { - Primary: Blues['300'], - Secondary: Grays['300'], + highlight: { + primary: Blues['500'], + secondary: Grays['700'], }, - Warning: { - Primary: Grays['10'], - Secondary: Grays['200'], + warning: { + primary: Grays['50'], + secondary: Grays['150'], }, - Alert: { - Primary: Grays['950'], - Secondary: Grays['700'], + alert: { + primary: Grays['50'], + secondary: Grays['300'], }, - Success: { - Primary: Grays['950'], - Secondary: Grays['700'], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, + Feedback: { + Success: Greens['400'], + Warning: Yellows['500'], + Error: Reds['500'], + Inverted: Grays['950'], + }, } as const const Layer = { '1': { - Fill: Grays['75'], - Outline: Grays['300'], + Fill: Grays['950'], + Outline: Grays['900'], }, '2': { - Fill: Grays['100'], - Outline: Grays['200'], + Fill: Grays['900'], + Outline: Grays['800'], }, '3': { - Fill: Grays['50'], - Outline: Grays['300'], - }, - Highlight: Blues['50'], - TypeAction: { - Selected: Blues['50'], - Hover: Blues['100'], + Fill: Grays['800'], + Outline: Grays['700'], }, Feedback: { - Info: Blues['500'], - Success: Greens['600'], - Warning: Yellows['500'], + Info: Blues['50'], + Success: Greens['300'], + Warning: Oranges['500'], Error: Reds['500'], }, + Highlight: Blues['50'], + TypeAction: { + Selected: Blues['900'], + Hover: Grays['750'], + }, } as const return { Text, Layer, Tables: { + Row: { + Default: Grays['950'], + Selected: Blues['900'], + Hover: Grays['750'], + }, Header: { - Fill: Grays['200'], + Fill: Grays['800'], Label: { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Default: Grays['300'], + Hover: Blues['400'], + Active: Grays['50'], }, }, - Row: { - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, - Default: Layer['1'].Fill, - }, }, Badges: { - Border: { - Default: Grays['400'], - Active: Blues['500'], - Alert: Reds['500'], - Highlight: Blues['500'], - Warning: Oranges['500'], - Accent: Blues['500'], - }, Label: { - Default: Grays['975'], + Default: Grays['10'], Active: Grays['10'], Alert: Grays['10'], - Highlight: Blues['500'], + Highlight: Blues['400'], Warning: Grays['975'], Accent: Grays['10'], }, + Border: { + Default: Grays['600'], + Active: Blues['400'], + Alert: Reds['500'], + Highlight: Blues['400'], + Warning: Oranges['500'], + Accent: Blues['400'], + }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['950'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['950'], Warning: Yellows['500'], - Accent: Blues['500'], + Accent: Blues['400'], }, }, } as const @@ -218,107 +218,107 @@ function createDarkSurfaces() { function createChadSurfaces() { const Text = { - Primary: Grays['50'], - Secondary: Grays['300'], - Tertiary: Grays['400'], - Highlight: Violets['400'], - Disabled: Grays['500'], Feedback: { - Warning: Yellows['500'], - Success: Greens['500'], + Warning: Oranges['500'], + Success: Greens['600'], Error: Reds['500'], Inverted: Grays['50'], }, FilledFeedback: { - Info: { - Primary: Grays['950'], - Secondary: Grays['700'], + info: { + primary: Violets['500'], + secondary: Grays['700'], }, - Highlight: { - Primary: Grays['950'], - Secondary: Grays['700'], + highlight: { + primary: Grays['50'], + secondary: Grays['300'], }, - Warning: { - Primary: Grays['950'], - Secondary: Grays['700'], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays['950'], - Secondary: Grays['700'], + alert: { + primary: Grays['50'], + secondary: Grays['300'], }, - Success: { - Primary: Grays['950'], - Secondary: Grays['700'], + success: { + primary: Grays['50'], + secondary: Grays['300'], }, }, + Primary: Grays['950'], + Secondary: Grays['750'], + Tertiary: Grays['700'], + Disabled: Grays['500'], + Highlight: Violets['600'], } as const const Layer = { '1': { - Fill: Violets['950'], - Outline: Violets['800'], + Fill: Grays['150'], + Outline: Grays['400'], }, '2': { - Fill: Violets['800'], - Outline: Violets['600'], + Fill: Grays['300'], + Outline: Grays['500'], }, '3': { - Fill: Violets['700'], - Outline: Violets['500'], - }, - Highlight: Violets['950'], - TypeAction: { - Selected: Violets['900'], - Hover: Violets['800'], + Fill: Grays['400'], + Outline: Grays['600'], }, Feedback: { - Info: Grays['850'], - Success: Greens['300'], - Warning: Oranges['500'], + Info: Violets['700'], + Success: Greens['600'], + Warning: Yellows['500'], Error: Reds['500'], }, + TypeAction: { + Selected: Violets['50'], + Hover: Violets['200'], + }, + Highlight: Violets['800'], } as const return { Text, Layer, Tables: { + Row: { + Default: Grays['150'], + Selected: Violets['50'], + Hover: Violets['200'], + }, Header: { - Fill: Layer['3'].Fill, + Fill: Grays['400'], Label: { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Default: Grays['750'], + Hover: Violets['600'], + Active: Grays['950'], }, }, - Row: { - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, - Default: Layer['1'].Fill, - }, }, Badges: { - Border: { - Default: Grays['600'], - Active: Violets['400'], - Alert: Reds['500'], - Highlight: Violets['200'], - Warning: Oranges['500'], - Accent: Violets['400'], - }, Label: { - Default: Text.Primary, + Default: Grays['950'], Active: Grays['10'], Alert: Grays['10'], - Highlight: Violets['200'], + Highlight: Violets['800'], Warning: Grays['975'], Accent: Grays['10'], }, + Border: { + Default: Grays['400'], + Active: Violets['500'], + Alert: Reds['500'], + Highlight: Violets['800'], + Warning: Oranges['500'], + Accent: Violets['800'], + }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['150'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['150'], Warning: Yellows['500'], - Accent: Violets['400'], + Accent: Violets['800'], }, }, } as const @@ -329,34 +329,34 @@ function createLightInvertedSurfaces() { Primary: Grays['50'], Secondary: Grays['300'], Tertiary: Grays['400'], - Highlight: Blues['300'], Disabled: Grays['500'], + Highlight: Blues['300'], Feedback: { - Error: Reds['500'], - Warning: Oranges['500'], Success: Greens['300'], + Warning: Oranges['500'], + Error: Reds['500'], Inverted: Grays['50'], }, FilledFeedback: { - Info: { - Primary: Blues['300'], - Secondary: Grays['300'], + info: { + primary: Blues['300'], + secondary: Grays['300'], }, - Warning: { - Primary: Grays['25'], - Secondary: Grays['300'], + highlight: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays['950'], - Secondary: Grays['700'], + warning: { + primary: Grays['25'], + secondary: Grays['300'], }, - Highlight: { - Primary: Grays['950'], - Secondary: Grays['700'], + alert: { + primary: Grays['950'], + secondary: Grays['700'], }, - Success: { - Primary: Grays['950'], - Secondary: Grays['700'], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, } as const @@ -373,37 +373,45 @@ function createLightInvertedSurfaces() { Fill: Grays['750'], Outline: Grays['600'], }, - Highlight: Blues['500'], - TypeAction: { - Selected: Grays['750'], - Hover: Grays['850'], - }, Feedback: { Info: Blues['800'], Success: Greens['300'], Warning: Oranges['500'], Error: Reds['500'], }, + Highlight: Blues['500'], + TypeAction: { + Selected: Grays['750'], + Hover: Grays['850'], + }, } as const return { Text, Layer, Tables: { + Row: { + Default: Grays['950'], + Selected: Grays['850'], + Hover: Grays['750'], + }, Header: { Fill: Grays['800'], Label: { - Default: Text.Primary, - Hover: Text.Highlight, - Active: Text.Secondary, + Default: Grays['50'], + Hover: Blues['300'], + Active: Grays['300'], }, }, - Row: { - Hover: Layer.TypeAction.Selected, - Selected: Layer.TypeAction.Hover, - Default: Layer['1'].Fill, - }, }, Badges: { + Label: { + Default: Grays['50'], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Blues['400'], + Warning: Grays['975'], + Accent: Grays['10'], + }, Border: { Default: Grays['600'], Active: Blues['400'], @@ -412,16 +420,8 @@ function createLightInvertedSurfaces() { Warning: Oranges['500'], Accent: Blues['400'], }, - Label: { - Default: Text.Primary, - Active: Grays['10'], - Alert: Grays['10'], - Highlight: Blues['400'], - Warning: Grays['975'], - Accent: Grays['10'], - }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['950'], Active: Greens['400'], Alert: Reds['500'], Highlight: Grays['10'], @@ -434,39 +434,39 @@ function createLightInvertedSurfaces() { function createDarkInvertedSurfaces() { const Text = { - Primary: Grays['950'], - Secondary: Grays['750'], - Tertiary: Grays['700'], - Highlight: Blues['500'], + primary: Grays['950'], + secondary: Grays['750'], + tertiary: Grays['700'], Disabled: Grays['500'], - Feedback: { - Warning: Oranges['500'], - Success: Greens['600'], - Error: Reds['500'], - Inverted: Grays['950'], - }, + highlight: Blues['500'], FilledFeedback: { - Info: { - Primary: Grays['950'], - Secondary: Grays['700'], + info: { + primary: Grays['950'], + secondary: Grays['700'], }, - Highlight: { - Primary: Blues['300'], - Secondary: Grays['300'], + highlight: { + primary: Blues['300'], + secondary: Grays['300'], }, - Warning: { - Primary: Grays['10'], - Secondary: Grays['200'], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays['950'], - Secondary: Grays['700'], + alert: { + primary: Grays['950'], + secondary: Grays['700'], }, - Success: { - Primary: Grays['950'], - Secondary: Grays['700'], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, + Feedback: { + Success: Greens['600'], + Warning: Oranges['500'], + Error: Reds['500'], + Inverted: Grays['950'], + }, } as const const Layer = { '1': { @@ -481,45 +481,37 @@ function createDarkInvertedSurfaces() { Fill: Grays['50'], Outline: Grays['300'], }, - Highlight: Blues['50'], - TypeAction: { - Selected: Blues['50'], - Hover: Blues['100'], - }, Feedback: { Info: Blues['500'], Success: Greens['600'], Warning: Yellows['500'], Error: Reds['500'], }, + Highlight: Blues['50'], + TypeAction: { + Selected: Blues['50'], + Hover: Blues['100'], + }, } as const return { Text, Layer, Tables: { + Row: { + Default: Grays['75'], + Selected: Blues['50'], + Hover: Blues['100'], + }, Header: { Fill: Grays['200'], Label: { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Default: Grays['750'], + Hover: Blues['500'], + Active: Grays['950'], }, }, - Row: { - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, - Default: Layer['1'].Fill, - }, }, Badges: { - Border: { - Default: Grays['400'], - Active: Blues['500'], - Alert: Reds['500'], - Highlight: Blues['500'], - Warning: Oranges['500'], - Accent: Blues['500'], - }, Label: { Default: Grays['975'], Active: Grays['10'], @@ -528,11 +520,19 @@ function createDarkInvertedSurfaces() { Warning: Grays['975'], Accent: Grays['10'], }, + Border: { + Default: Grays['400'], + Active: Blues['500'], + Alert: Reds['500'], + Highlight: Blues['500'], + Warning: Oranges['500'], + Accent: Blues['500'], + }, Fill: { - Default: Layer['1'].Fill, + Default: Grays['75'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Grays['75'], Warning: Yellows['500'], Accent: Blues['500'], }, @@ -542,11 +542,6 @@ function createDarkInvertedSurfaces() { function createChadInvertedSurfaces() { const Text = { - Primary: Grays['50'], - Secondary: Grays['300'], - Tertiary: Grays['400'], - Highlight: Violets['400'], - Disabled: Grays['500'], Feedback: { Warning: Yellows['500'], Success: Greens['500'], @@ -554,27 +549,32 @@ function createChadInvertedSurfaces() { Inverted: Grays['50'], }, FilledFeedback: { - Info: { - Primary: Grays['950'], - Secondary: Grays['700'], + info: { + primary: Grays['950'], + secondary: Grays['700'], }, - Highlight: { - Primary: Grays['950'], - Secondary: Grays['700'], + highlight: { + primary: Grays['950'], + secondary: Grays['700'], }, - Warning: { - Primary: Grays['950'], - Secondary: Grays['700'], + warning: { + primary: Grays['950'], + secondary: Grays['700'], }, - Alert: { - Primary: Grays['950'], - Secondary: Grays['700'], + alert: { + primary: Grays['950'], + secondary: Grays['700'], }, - Success: { - Primary: Grays['950'], - Secondary: Grays['700'], + success: { + primary: Grays['950'], + secondary: Grays['700'], }, }, + Primary: Grays['50'], + Secondary: Grays['300'], + Tertiary: Grays['400'], + Disabled: Grays['500'], + Highlight: Violets['400'], } as const const Layer = { '1': { @@ -589,37 +589,45 @@ function createChadInvertedSurfaces() { Fill: Violets['700'], Outline: Violets['500'], }, - Highlight: Violets['950'], - TypeAction: { - Selected: Violets['900'], - Hover: Violets['800'], - }, Feedback: { Info: Grays['850'], Success: Greens['300'], Warning: Oranges['500'], Error: Reds['500'], }, + TypeAction: { + Selected: Violets['900'], + Hover: Violets['800'], + }, + Highlight: Violets['950'], } as const return { Text, Layer, Tables: { + Row: { + Default: Violets['950'], + Selected: Violets['900'], + Hover: Violets['800'], + }, Header: { - Fill: Layer['3'].Fill, + Fill: Violets['700'], Label: { - Default: Text.Secondary, - Hover: Text.Highlight, - Active: Text.Primary, + Default: Grays['300'], + Hover: Violets['400'], + Active: Grays['50'], }, }, - Row: { - Selected: Layer.TypeAction.Selected, - Hover: Layer.TypeAction.Hover, - Default: Layer['1'].Fill, - }, }, Badges: { + Label: { + Default: Grays['50'], + Active: Grays['10'], + Alert: Grays['10'], + Highlight: Violets['200'], + Warning: Grays['975'], + Accent: Grays['10'], + }, Border: { Default: Grays['600'], Active: Violets['400'], @@ -628,19 +636,11 @@ function createChadInvertedSurfaces() { Warning: Oranges['500'], Accent: Violets['400'], }, - Label: { - Default: Text.Primary, - Active: Grays['10'], - Alert: Grays['10'], - Highlight: Violets['200'], - Warning: Grays['975'], - Accent: Grays['10'], - }, Fill: { - Default: Layer['1'].Fill, + Default: Violets['950'], Active: Greens['500'], Alert: Reds['500'], - Highlight: Layer['1'].Fill, + Highlight: Violets['950'], Warning: Yellows['500'], Accent: Violets['400'], }, diff --git a/packages/curve-ui-kit/src/themes/design/2_theme.ts b/packages/curve-ui-kit/src/themes/design/2_theme.ts index c0826b992..7fc9a4fd1 100644 --- a/packages/curve-ui-kit/src/themes/design/2_theme.ts +++ b/packages/curve-ui-kit/src/themes/design/2_theme.ts @@ -3,6 +3,7 @@ import { Blues, Grays, Greens, Reds, Yellows, Oranges, Violets, TransitionFuncti import { SurfacesAndText } from './1_surfaces_text' const { plain, inverted } = SurfacesAndText + const Transition = `all ${TransitionFunction}` const InsetOverline = '0 0 auto' as const const InsetUnderline = 'auto 0 0' as const @@ -40,17 +41,17 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li '975': Grays['975'], }, Primary: { - '50': Violets['50'], - '100': Violets['100'], - '200': Violets['200'], - '300': Violets['300'], - '400': Violets['400'], - '500': Violets['500'], - '600': Violets['600'], - '700': Violets['700'], - '800': Violets['800'], - '900': Violets['900'], - '950': Violets['950'], + '50': Blues['50'], + '100': Blues['100'], + '200': Blues['200'], + '300': Blues['300'], + '400': Blues['400'], + '500': Blues['500'], + '600': Blues['600'], + '700': Blues['700'], + '800': Blues['800'], + '900': Blues['900'], + '950': Blues['950'], }, Secondary: { '100': Greens['100'], @@ -69,84 +70,96 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li '600': Reds['500'], }, } as const + const Layer = { '1': { - Fill: plain.Chad.Layer['1'].Fill, - Outline: plain.Chad.Layer['1'].Outline, + Fill: Light.Layer['1'].Fill, + Outline: Light.Layer['1'].Outline, }, '2': { - Fill: plain.Chad.Layer['2'].Fill, - Outline: plain.Chad.Layer['2'].Outline, + Fill: Light.Layer['2'].Fill, + Outline: Light.Layer['2'].Outline, }, '3': { - Fill: plain.Chad.Layer['3'].Fill, - Outline: plain.Chad.Layer['3'].Outline, - }, - Highlight: { - Outline: Color.Primary['500'], - Fill: plain.Chad.Layer.Highlight, + Fill: Light.Layer['3'].Fill, + Outline: Light.Layer['3'].Outline, }, App: { - Background: '#bdbbecff', + Background: '#f0edeb', + }, + Feedback: { + Info: Light.Layer.Feedback.Info, + Success: Light.Layer.Feedback.Success, + Warning: Light.Layer.Feedback.Warning, + Error: Light.Layer.Feedback.Error, }, TypeAction: { - Selected: plain.Chad.Layer.TypeAction.Selected, - Hover: plain.Chad.Layer.TypeAction.Hover, + Selected: Light.Layer.TypeAction.Selected, + Hover: Light.Layer.TypeAction.Hover, }, - Feedback: { - Warning: plain.Chad.Layer.Feedback.Warning, - Success: plain.Chad.Layer.Feedback.Success, - Error: plain.Chad.Layer.Feedback.Error, - Info: plain.Chad.Layer.Feedback.Info, + Highlight: { + Fill: Light.Layer.Highlight, + Outline: Color.Primary['500'], }, } as const + const Text = { TextColors: { - Primary: plain.Chad.Text.Primary, - Secondary: plain.Chad.Text.Secondary, - Tertiary: plain.Chad.Text.Tertiary, - Highlight: plain.Chad.Text.Highlight, - Disabled: plain.Chad.Text.Disabled, - Feedback: { - Success: plain.Chad.Text.Feedback.Success, - Error: plain.Chad.Text.Feedback.Error, - Warning: plain.Chad.Text.Feedback.Warning, - }, + Primary: Light.Text.Primary, + Secondary: Light.Text.Secondary, + Tertiary: Light.Text.Tertiary, + Highlight: Light.Text.Highlight, + Disabled: Light.Text.Disabled, FilledFeedback: { Info: { - Primary: plain.Chad.Text.FilledFeedback.Info.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Info.Secondary, + Primary: Light.Text.FilledFeedback.info.primary, + Secondary: Light.Text.FilledFeedback.info.secondary, }, Highlight: { - Primary: plain.Chad.Text.FilledFeedback.Highlight.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Highlight.Secondary, + Primary: Light.Text.FilledFeedback.highlight.primary, + Secondary: Light.Text.FilledFeedback.highlight.secondary, }, Warning: { - Primary: plain.Chad.Text.FilledFeedback.Warning.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Warning.Secondary, + Primary: Light.Text.FilledFeedback.warning.primary, + Secondary: Light.Text.FilledFeedback.warning.secondary, }, Alert: { - Primary: plain.Chad.Text.FilledFeedback.Alert.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Alert.Secondary, + Primary: Light.Text.FilledFeedback.alert.primary, + Secondary: Light.Text.FilledFeedback.alert.secondary, }, Success: { - Primary: plain.Chad.Text.FilledFeedback.Success.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Success.Secondary, + Primary: Light.Text.FilledFeedback.success.primary, + Secondary: Light.Text.FilledFeedback.success.secondary, }, }, + Feedback: { + Success: Light.Text.Feedback.Success, + Warning: Light.Text.Feedback.Warning, + Error: Light.Text.Feedback.Error, + Inverted: Grays['50'], + }, }, FontFamily: { - Heading: 'Minecraft', - Body: 'Hubot Sans', - Mono: 'Hubot Sans', - Button: 'Minecraft', + Heading: 'Mona Sans', + Body: 'Mona Sans', + Mono: 'Mona Sans', + Button: 'Mona Sans', }, } as const + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Color.Primary['500'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, Primary: { Default: { Label: Grays['50'], - Fill: Violets['950'], + Fill: Blues['500'], }, Hover: { Label: Grays['50'], @@ -154,11 +167,9 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Violets['200'], + Fill: Color.Primary['100'], }, }, - Focus_Outline_Width: 2, - Focus_Outline: Color.Primary['600'], Secondary: { Default: { Label: Grays['50'], @@ -166,11 +177,25 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Hover: { Label: Grays['50'], - Fill: Violets['500'], + Fill: Blues['500'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Grays['600'], + Fill: Color.Neutral['600'], + }, + }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['300'], + }, + Hover: { + Label: Blues['500'], + Outline: Blues['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Text.TextColors.Disabled, }, }, Ghost: { @@ -178,31 +203,25 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Label: Text.TextColors.Highlight, }, Hover: { - Label: Violets['800'], - Fill: Violets['500'], + Label: Grays['975'], + Fill: Grays['900'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Violets['200'], + Fill: Grays['500'], }, }, - Radius: { - Md: undefined, - Xs: undefined, - Sm: undefined, - Lg: undefined, - }, Success: { Default: { Label: Grays['900'], Fill: Greens['400'], }, Hover: { - Label: Greens['500'], + Label: Greens['300'], Fill: Grays['900'], }, Disabled: { - Label: plain.Chad.Text.Disabled, + Label: Light.Text.Disabled, Fill: Greens['600'], }, }, @@ -233,52 +252,39 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Fill: Layer.Highlight.Fill, }, }, - Outlined: { - Default: { - Label: Grays['950'], - Outline: Grays['950'], - }, - Hover: { - Label: Violets['500'], - Outline: Violets['500'], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Violets['200'], - }, - }, Transition: 'Transition', } as const + const Tabs = { - Contained: { + UnderLined: { + Container_Border: Light.Layer['1'].Outline, Default: { - Label: plain.Chad.Text.FilledFeedback.Highlight.Secondary, - Fill: Color.Primary['950'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - Label: Color.Neutral['50'], - Fill: Color.Primary['800'], + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, Current: { Label: Text.TextColors.Primary, - Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, }, - UnderLined: { + Contained: { Default: { Label: Text.TextColors.Secondary, - Outline: Layer['2'].Outline, + Fill: Color.Neutral['300'], }, Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Label: Color.Neutral['50'], + Fill: Color.Neutral['900'], }, Current: { Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, - 'Container border': Layer['1'].Outline, }, OverLined: { Default: { @@ -296,15 +302,16 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Transition: 'Transition', } as const + const Chips = { Default: { Label: Text.TextColors.Secondary, - Fill: Layer['1'].Fill, - Stroke: plain.Chad.Badges.Border.Default, + Fill: Layer['2'].Fill, + Stroke: Light.Badges.Border.Default, }, Hover: { Label: Color.Neutral['50'], - Fill: Color.Primary['950'], + Fill: Color.Neutral['900'], }, Current: { Label: Text.TextColors.Highlight, @@ -313,36 +320,42 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, BorderRadius: { Clickable: '0', - NonClickable: '6.25rem' /* 100px */, + NonClickable: '6.25rem', // 100px }, } as const + const Badges = { Border: { - Default: plain.Chad.Badges.Border.Default, - Active: plain.Chad.Badges.Border.Active, - Alert: plain.Chad.Badges.Border.Alert, - Highlight: plain.Chad.Badges.Border.Highlight, - Warning: plain.Chad.Badges.Border.Warning, - Accent: plain.Chad.Badges.Border.Accent, + Default: Light.Badges.Border.Default, + Active: Light.Badges.Border.Active, + Alert: Light.Badges.Border.Alert, + Highlight: Light.Badges.Border.Highlight, + Warning: Light.Badges.Border.Warning, + Accent: Light.Badges.Border.Accent, }, Label: { - Default: plain.Chad.Badges.Label.Default, - Active: plain.Chad.Badges.Label.Active, - Alert: plain.Chad.Badges.Label.Alert, - Highlight: plain.Chad.Badges.Label.Highlight, - Warning: plain.Chad.Badges.Label.Warning, - Accent: plain.Chad.Badges.Label.Accent, + Default: Light.Badges.Label.Default, + Active: Light.Badges.Label.Active, + Alert: Light.Badges.Label.Alert, + Highlight: Light.Badges.Label.Highlight, + Warning: Light.Badges.Label.Warning, + Accent: Light.Badges.Label.Accent, }, Fill: { - Default: plain.Chad.Badges.Fill.Default, - Active: plain.Chad.Badges.Fill.Active, - Alert: plain.Chad.Badges.Fill.Alert, - Highlight: plain.Chad.Badges.Fill.Highlight, - Warning: plain.Chad.Badges.Fill.Warning, - Accent: plain.Chad.Badges.Fill.Accent, + Default: Light.Badges.Fill.Default, + Active: Light.Badges.Fill.Active, + Alert: Light.Badges.Fill.Alert, + Highlight: Light.Badges.Fill.Highlight, + Warning: Light.Badges.Fill.Warning, + Accent: Light.Badges.Fill.Accent, }, } as const + const Chart = { + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], + }, Candles: { Positive: Greens['400'], Negative: Reds['600'], @@ -352,17 +365,14 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li Negative: Reds['600'], Line1: Color.Primary['500'], Line2: Yellows['500'], - 'Line 3': Color.Secondary['500'], - }, - LiquidationZone: { - Current: Yellows['400'], - Future: Blues['200'], + Line3: Color.Secondary['500'], }, } as const + const Toggles = { Default: { Label: Text.TextColors.Primary, - Fill: Color.Primary['300'], + Fill: Color.Neutral['100'], }, Hover: { Label: Text.TextColors.Highlight, @@ -370,46 +380,49 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, Current: { Label: Grays['50'], - Fill: Color.Primary['800'], + Fill: Color.Neutral['900'], }, } as const + const Table = { Header: { - Fill: plain.Chad.Tables.Header.Fill, - Label: { - Default: plain.Chad.Tables.Header.Label.Default, - Hover: plain.Chad.Tables.Header.Label.Active, - Active: plain.Chad.Tables.Header.Label.Active, + Fill: Light.Tables.Header.Fill, + 'Label_&_icon': { + Default: Light.Tables.Header.Label.Default, + Hover: Light.Tables.Header.Label.Hover, + Active: Light.Tables.Header.Label.Active, }, }, Row: { - Default: plain.Chad.Tables.Row.Default, - Selected: plain.Chad.Tables.Row.Selected, - Hover: plain.Chad.Tables.Row.Hover, + Default: Light.Tables.Row.Default, + Selected: Light.Tables.Row.Selected, + Hover: Light.Tables.Row.Hover, }, } as const + const InputBaseDefaultFill = Grays['100'] + const Inputs = { Base: { Default: { Fill: { Default: Grays['100'], - Active: Grays['100'], + Active: Grays['50'], }, Border: { Default: Grays['200'], + Active: Light.Text.Highlight, + Filled: Grays['850'], Error: Reds['500'], - Active: Violets['400'], - Filled: Violets['600'], }, }, Nested: { - Nested: Grays['50'], - Fill: Violets['50'], + Nested: Grays['10'], + Fill: Grays['100'], Border: { - Default: Grays['200'], - Active: Violets['400'], - Filled: Violets['400'], + Default: Grays['400'], + Active: Light.Text.Highlight, + Filled: Grays['850'], Error: Reds['500'], }, }, @@ -421,6 +434,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, }, } as const + const Sliders = { default: { SliderThumbImage: '/mui/slider-thumb-white.svg', @@ -432,8 +446,9 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const + const Switch = { - Default: { Fill: Layer['1'].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const @@ -458,188 +473,206 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) => { const Color = { Neutral: { - '25': Grays['25'], - '50': Grays['50'], - '75': Grays['75'], - '100': Grays['100'], - '150': Grays['150'], - '200': Grays['200'], - '300': Grays['300'], - '400': Grays['400'], + '25': Grays['975'], + '50': Grays['950'], + '75': Grays['900'], + '100': Grays['850'], + '150': Grays['800'], + '200': Grays['750'], + '300': Grays['700'], + '400': Grays['600'], '500': Grays['500'], - '600': Grays['600'], - '700': Grays['700'], - '750': Grays['750'], - '800': Grays['800'], - '850': Grays['850'], - '900': Grays['900'], - '950': Grays['950'], - '975': Grays['975'], + '600': Grays['400'], + '700': Grays['300'], + '750': Grays['200'], + '800': Grays['150'], + '850': Grays['100'], + '900': Grays['75'], + '950': Grays['50'], + '975': Grays['25'], }, Primary: { - '50': Violets['50'], - '100': Violets['100'], - '200': Violets['200'], - '300': Violets['300'], - '400': Violets['400'], - '500': Violets['500'], - '600': Violets['600'], - '700': Violets['700'], - '800': Violets['800'], - '900': Violets['900'], - '950': Violets['950'], + '50': Blues['950'], + '100': Blues['900'], + '200': Blues['800'], + '300': Blues['700'], + '400': Blues['600'], + '500': Blues['500'], + '600': Blues['400'], + '700': Blues['300'], + '800': Blues['200'], + '900': Blues['100'], + '950': Blues['50'], }, Secondary: { - '100': Greens['100'], - '200': Greens['200'], - '300': Greens['300'], - '400': Greens['400'], - '500': Greens['500'], - '600': Greens['600'], - '700': Greens['700'], - '800': Greens['800'], + '100': Greens['800'], + '200': Greens['700'], + '300': Greens['600'], + '400': Greens['500'], + '500': Greens['400'], + '600': Greens['300'], + '700': Greens['200'], + '800': Greens['100'], }, Tertiary: { - '200': Reds['200'], - '300': Yellows['500'], - '400': Oranges['500'], - '600': Reds['500'], + '200': Reds['800'], + '300': Oranges['500'], + '400': Yellows['500'], + '600': Yellows['400'], }, } as const + const Layer = { '1': { - Fill: plain.Chad.Layer['1'].Fill, - Outline: plain.Chad.Layer['1'].Outline, + Fill: Dark.Layer['1'].Fill, + Outline: Dark.Layer['1'].Outline, }, '2': { - Fill: plain.Chad.Layer['2'].Fill, - Outline: plain.Chad.Layer['2'].Outline, + Fill: Dark.Layer['2'].Fill, + Outline: Dark.Layer['2'].Outline, }, '3': { - Fill: plain.Chad.Layer['3'].Fill, - Outline: plain.Chad.Layer['3'].Outline, - }, - Highlight: { - Outline: Color.Primary['500'], - Fill: plain.Chad.Layer.Highlight, + Fill: Dark.Layer['3'].Fill, + Outline: Dark.Layer['3'].Outline, }, App: { - Background: '#bdbbecff', + Background: '#12110f', + }, + Feedback: { + Info: Dark.Layer.Feedback.Info, + Success: Dark.Layer.Feedback.Success, + Warning: Dark.Layer.Feedback.Warning, + Error: Dark.Layer.Feedback.Error, }, TypeAction: { - Selected: plain.Chad.Layer.TypeAction.Selected, - Hover: plain.Chad.Layer.TypeAction.Hover, + Selected: Dark.Layer.TypeAction.Selected, + Hover: Dark.Layer.TypeAction.Hover, }, - Feedback: { - Warning: plain.Chad.Layer.Feedback.Warning, - Success: plain.Chad.Layer.Feedback.Success, - Error: plain.Chad.Layer.Feedback.Error, - Info: plain.Chad.Layer.Feedback.Info, + Highlight: { + Fill: Dark.Layer.Highlight, + Outline: Color.Primary['500'], }, } as const + const Text = { TextColors: { - Primary: plain.Chad.Text.Primary, - Secondary: plain.Chad.Text.Secondary, - Tertiary: plain.Chad.Text.Tertiary, - Highlight: plain.Chad.Text.Highlight, - Disabled: plain.Chad.Text.Disabled, - Feedback: { - Success: plain.Chad.Text.Feedback.Success, - Error: plain.Chad.Text.Feedback.Error, - Warning: plain.Chad.Text.Feedback.Warning, - }, + Primary: Dark.Text.primary, + Secondary: Dark.Text.secondary, + Tertiary: Dark.Text.tertiary, + Highlight: Dark.Text.highlight, + Disabled: Dark.Text.Disabled, FilledFeedback: { Info: { - Primary: plain.Chad.Text.FilledFeedback.Info.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Info.Secondary, + Primary: Dark.Text.FilledFeedback.info.primary, + Secondary: Dark.Text.FilledFeedback.info.secondary, }, Highlight: { - Primary: plain.Chad.Text.FilledFeedback.Highlight.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Highlight.Secondary, + Primary: Dark.Text.FilledFeedback.highlight.primary, + Secondary: Dark.Text.FilledFeedback.highlight.secondary, }, Warning: { - Primary: plain.Chad.Text.FilledFeedback.Warning.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Warning.Secondary, + Primary: Dark.Text.FilledFeedback.warning.primary, + Secondary: Dark.Text.FilledFeedback.warning.secondary, }, Alert: { - Primary: plain.Chad.Text.FilledFeedback.Alert.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Alert.Secondary, + Primary: Dark.Text.FilledFeedback.alert.primary, + Secondary: Dark.Text.FilledFeedback.alert.secondary, }, Success: { - Primary: plain.Chad.Text.FilledFeedback.Success.Primary, - Secondary: plain.Chad.Text.FilledFeedback.Success.Secondary, + Primary: Dark.Text.FilledFeedback.success.primary, + Secondary: Dark.Text.FilledFeedback.success.secondary, }, }, + Feedback: { + Success: Dark.Text.Feedback.Success, + Warning: Dark.Text.Feedback.Warning, + Error: Dark.Text.Feedback.Error, + Inverted: Grays['950'], + }, }, FontFamily: { - Heading: 'Minecraft', - Body: 'Hubot Sans', - Mono: 'Hubot Sans', - Button: 'Minecraft', + Heading: 'Mona Sans', + Body: 'Mona Sans', + Mono: 'Mona Sans', + Button: 'Mona Sans', }, } as const + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Color.Primary['500'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, Primary: { Default: { Label: Grays['50'], - Fill: Violets['950'], + Fill: Blues['500'], }, Hover: { - Label: Grays['50'], - Fill: Grays['900'], + Label: Grays['900'], + Fill: Grays['50'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Violets['200'], + Fill: Color.Primary['800'], }, }, - Focus_Outline_Width: 2, - Focus_Outline: Color.Primary['600'], Secondary: { Default: { - Label: Grays['50'], - Fill: Grays['900'], + Label: Grays['900'], + Fill: Grays['50'], }, Hover: { + Label: Grays['900'], + Fill: Blues['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Fill: Color.Neutral['600'], + }, + }, + Outlined: { + Default: { Label: Grays['50'], - Fill: Violets['500'], + Outline: Grays['700'], + }, + Hover: { + Label: Blues['500'], + Outline: Blues['500'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Grays['600'], + Outline: Text.TextColors.Disabled, }, }, Ghost: { Default: { - Label: Text.TextColors.Highlight, + Label: Color.Primary['700'], }, Hover: { - Label: Violets['800'], - Fill: Violets['500'], + Label: Grays['50'], + Fill: Grays['50'], }, Disabled: { Label: Text.TextColors.Disabled, - Fill: Violets['200'], + Fill: Grays['850'], }, }, - Radius: { - Md: undefined, - Xs: undefined, - Sm: undefined, - Lg: undefined, - }, Success: { Default: { Label: Grays['900'], - Fill: Greens['400'], + Fill: Greens['300'], }, Hover: { Label: Greens['500'], - Fill: Grays['900'], + Fill: Grays['50'], }, Disabled: { - Label: plain.Chad.Text.Disabled, + Label: Dark.Text.Disabled, Fill: Greens['600'], }, }, @@ -670,52 +703,39 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) Fill: Layer.Highlight.Fill, }, }, - Outlined: { - Default: { - Label: Grays['950'], - Outline: Grays['950'], - }, - Hover: { - Label: Violets['500'], - Outline: Violets['500'], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Violets['200'], - }, - }, Transition: 'Transition', } as const + const Tabs = { - Contained: { + UnderLined: { + Container_Border: Dark.Layer['1'].Outline, Default: { - Label: plain.Chad.Text.FilledFeedback.Highlight.Secondary, - Fill: Color.Primary['950'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - Label: Color.Neutral['50'], - Fill: Color.Primary['800'], + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, Current: { Label: Text.TextColors.Primary, - Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, }, - UnderLined: { + Contained: { Default: { Label: Text.TextColors.Secondary, - Outline: Layer['2'].Outline, + Fill: Color.Neutral['200'], }, Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Label: Color.Neutral['50'], + Fill: Color.Neutral['900'], }, Current: { Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, - 'Container border': Layer['1'].Outline, }, OverLined: { Default: { @@ -733,131 +753,139 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) }, Transition: 'Transition', } as const + const Chips = { Default: { - Label: Text.TextColors.Secondary, - Fill: Layer['1'].Fill, - Stroke: plain.Chad.Badges.Border.Default, + Label: Text.TextColors.Primary, + Fill: Layer['2'].Fill, + Stroke: Dark.Badges.Border.Default, }, Hover: { Label: Color.Neutral['50'], - Fill: Color.Primary['950'], + Fill: Color.Neutral['900'], }, Current: { - Label: Text.TextColors.Highlight, + Label: plain.Light.Text.Highlight, Fill: Layer['2'].Fill, Outline: Layer.Highlight.Outline, }, BorderRadius: { Clickable: '0', - NonClickable: '6.25rem' /* 100px */, + NonClickable: '6.25rem', // 100px }, } as const + const Badges = { Border: { - Default: plain.Chad.Badges.Border.Default, - Active: plain.Chad.Badges.Border.Active, - Alert: plain.Chad.Badges.Border.Alert, - Highlight: plain.Chad.Badges.Border.Highlight, - Warning: plain.Chad.Badges.Border.Warning, - Accent: plain.Chad.Badges.Border.Accent, + Default: Dark.Badges.Border.Default, + Active: Dark.Badges.Border.Active, + Alert: Dark.Badges.Border.Alert, + Highlight: Dark.Badges.Border.Highlight, + Warning: Dark.Badges.Border.Warning, + Accent: Dark.Badges.Border.Accent, }, Label: { - Default: plain.Chad.Badges.Label.Default, - Active: plain.Chad.Badges.Label.Active, - Alert: plain.Chad.Badges.Label.Alert, - Highlight: plain.Chad.Badges.Label.Highlight, - Warning: plain.Chad.Badges.Label.Warning, - Accent: plain.Chad.Badges.Label.Accent, + Default: Dark.Badges.Label.Default, + Active: Dark.Badges.Label.Active, + Alert: Dark.Badges.Label.Alert, + Highlight: Dark.Badges.Label.Highlight, + Warning: Dark.Badges.Label.Warning, + Accent: Dark.Badges.Label.Accent, }, Fill: { - Default: plain.Chad.Badges.Fill.Default, - Active: plain.Chad.Badges.Fill.Active, - Alert: plain.Chad.Badges.Fill.Alert, - Highlight: plain.Chad.Badges.Fill.Highlight, - Warning: plain.Chad.Badges.Fill.Warning, - Accent: plain.Chad.Badges.Fill.Accent, + Default: Dark.Badges.Fill.Default, + Active: Dark.Badges.Fill.Active, + Alert: Dark.Badges.Fill.Alert, + Highlight: Dark.Badges.Fill.Highlight, + Warning: Dark.Badges.Fill.Warning, + Accent: Dark.Badges.Fill.Accent, }, } as const + const Chart = { + LiquidationZone: { + Current: Oranges['950'], + Future: Blues['800'], + }, Candles: { - Positive: Greens['400'], - Negative: Reds['600'], + Positive: Greens['300'], + Negative: Reds['500'], }, Lines: { - Positive: Greens['400'], - Negative: Reds['600'], + Positive: Greens['300'], + Negative: Reds['500'], Line1: Color.Primary['500'], Line2: Yellows['500'], - 'Line 3': Color.Secondary['500'], - }, - LiquidationZone: { - Current: Yellows['400'], - Future: Blues['200'], + Line3: Color.Secondary['500'], }, } as const + const Toggles = { Default: { Label: Text.TextColors.Primary, - Fill: Color.Primary['300'], + Fill: Color.Neutral['100'], }, Hover: { Label: Text.TextColors.Highlight, Fill: Layer['3'].Fill, }, Current: { - Label: Grays['50'], - Fill: Color.Primary['800'], + Label: Color.Neutral['50'], + Fill: Color.Neutral['950'], }, } as const + const Table = { Header: { - Fill: plain.Chad.Tables.Header.Fill, - Label: { - Default: plain.Chad.Tables.Header.Label.Default, - Hover: plain.Chad.Tables.Header.Label.Active, - Active: plain.Chad.Tables.Header.Label.Active, + Fill: Dark.Tables.Header.Fill, + 'Label_&_icon': { + Default: Dark.Tables.Header.Label.Default, + Hover: Dark.Tables.Header.Label.Hover, + Active: Dark.Tables.Header.Label.Active, }, }, Row: { - Default: plain.Chad.Tables.Row.Default, - Selected: plain.Chad.Tables.Row.Selected, - Hover: plain.Chad.Tables.Row.Hover, + Default: Dark.Tables.Row.Default, + Selected: Dark.Tables.Row.Selected, + Hover: Dark.Tables.Row.Hover, }, } as const - const InputBaseDefaultFill = Grays['100'] + + const InputBaseDefaultFill = Grays['900'] + const Inputs = { Base: { Default: { Fill: { - Default: Grays['100'], - Active: Grays['100'], + Default: Grays['900'], + Active: Grays['900'], }, Border: { - Default: Grays['200'], + Default: Grays['800'], + Active: Dark.Text.highlight, + Filled: Grays['75'], Error: Reds['500'], - Active: Violets['400'], - Filled: Violets['600'], }, }, Nested: { - Nested: Grays['50'], - Fill: Violets['50'], + Nested: Grays['850'], + Fill: Grays['850'], Border: { - Default: Grays['200'], - Active: Violets['400'], - Filled: Violets['400'], + Default: Grays['600'], + Active: Dark.Text.highlight, + Filled: Grays['75'], Error: Reds['500'], }, }, }, Large: { Default: { - Fill: Grays['100'], - Outline: Grays['200'], + Fill: Grays['900'], + Outline: Grays['800'], }, }, } as const + const Sliders = { default: { SliderThumbImage: '/mui/slider-thumb-blue.svg', @@ -869,8 +897,9 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const + const Switch = { - Default: { Fill: Layer['1'].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const @@ -943,6 +972,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) '600': Reds['500'], }, } as const + const Layer = { '1': { Fill: Chad.Layer['1'].Fill, @@ -956,24 +986,25 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Chad.Layer['3'].Fill, Outline: Chad.Layer['3'].Outline, }, - Highlight: { - Outline: Color.Primary['500'], - Fill: Chad.Layer.Highlight, - }, App: { - Background: '#bdbbecff', + Background: '#bdbbec', + }, + Feedback: { + Info: Chad.Layer.Feedback.Info, + Success: Chad.Layer.Feedback.Success, + Warning: Chad.Layer.Feedback.Warning, + Error: Chad.Layer.Feedback.Error, }, TypeAction: { Selected: Chad.Layer.TypeAction.Selected, Hover: Chad.Layer.TypeAction.Hover, }, - Feedback: { - Warning: Chad.Layer.Feedback.Warning, - Success: Chad.Layer.Feedback.Success, - Error: Chad.Layer.Feedback.Error, - Info: Chad.Layer.Feedback.Info, + Highlight: { + Fill: Chad.Layer.Highlight, + Outline: Color.Primary['500'], }, } as const + const Text = { TextColors: { Primary: Chad.Text.Primary, @@ -981,33 +1012,34 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Tertiary: Chad.Text.Tertiary, Highlight: Chad.Text.Highlight, Disabled: Chad.Text.Disabled, - Feedback: { - Success: Chad.Text.Feedback.Success, - Error: Chad.Text.Feedback.Error, - Warning: Chad.Text.Feedback.Warning, - }, FilledFeedback: { Info: { - Primary: Chad.Text.FilledFeedback.Info.Primary, - Secondary: Chad.Text.FilledFeedback.Info.Secondary, + Primary: Chad.Text.FilledFeedback.info.primary, + Secondary: Chad.Text.FilledFeedback.info.secondary, }, Highlight: { - Primary: Chad.Text.FilledFeedback.Highlight.Primary, - Secondary: Chad.Text.FilledFeedback.Highlight.Secondary, + Primary: Chad.Text.FilledFeedback.highlight.primary, + Secondary: Chad.Text.FilledFeedback.highlight.secondary, }, Warning: { - Primary: Chad.Text.FilledFeedback.Warning.Primary, - Secondary: Chad.Text.FilledFeedback.Warning.Secondary, + Primary: Chad.Text.FilledFeedback.warning.primary, + Secondary: Chad.Text.FilledFeedback.warning.secondary, }, Alert: { - Primary: Chad.Text.FilledFeedback.Alert.Primary, - Secondary: Chad.Text.FilledFeedback.Alert.Secondary, + Primary: Chad.Text.FilledFeedback.alert.primary, + Secondary: Chad.Text.FilledFeedback.alert.secondary, }, Success: { - Primary: Chad.Text.FilledFeedback.Success.Primary, - Secondary: Chad.Text.FilledFeedback.Success.Secondary, + Primary: Chad.Text.FilledFeedback.success.primary, + Secondary: Chad.Text.FilledFeedback.success.secondary, }, }, + Feedback: { + Success: Chad.Text.Feedback.Success, + Warning: Chad.Text.Feedback.Warning, + Error: Chad.Text.Feedback.Error, + Inverted: Grays['50'], + }, }, FontFamily: { Heading: 'Minecraft', @@ -1016,7 +1048,16 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Button: 'Minecraft', }, } as const + const Button = { + Focus_Outline_Width: '0.125rem', // 2px + Focus_Outline: Color.Primary['600'], + Radius: { + xs: '0', + sm: '0', + md: '0', + lg: '0', + }, Primary: { Default: { Label: Grays['50'], @@ -1031,8 +1072,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Violets['200'], }, }, - Focus_Outline_Width: 2, - Focus_Outline: Color.Primary['600'], Secondary: { Default: { Label: Grays['50'], @@ -1047,6 +1086,20 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Grays['600'], }, }, + Outlined: { + Default: { + Label: Grays['950'], + Outline: Grays['950'], + }, + Hover: { + Label: Violets['500'], + Outline: Violets['500'], + }, + Disabled: { + Label: Text.TextColors.Disabled, + Outline: Violets['200'], + }, + }, Ghost: { Default: { Label: Text.TextColors.Highlight, @@ -1060,12 +1113,6 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Violets['200'], }, }, - Radius: { - Md: undefined, - Xs: undefined, - Sm: undefined, - Lg: undefined, - }, Success: { Default: { Label: Grays['900'], @@ -1107,52 +1154,39 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Layer.Highlight.Fill, }, }, - Outlined: { - Default: { - Label: Grays['950'], - Outline: Grays['950'], - }, - Hover: { - Label: Violets['500'], - Outline: Violets['500'], - }, - Disabled: { - Label: Text.TextColors.Disabled, - Outline: Violets['200'], - }, - }, Transition: 'Transition', } as const + const Tabs = { - Contained: { + UnderLined: { + Container_Border: Layer['1'].Outline, Default: { - Label: Chad.Text.FilledFeedback.Highlight.Secondary, - Fill: Color.Primary['950'], + Label: Text.TextColors.Secondary, + Outline: Layer['2'].Outline, }, Hover: { - Label: Color.Neutral['50'], - Fill: Color.Primary['800'], + Label: Text.TextColors.Highlight, + Outline: Layer.Highlight.Outline, }, Current: { Label: Text.TextColors.Primary, - Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, }, - UnderLined: { + Contained: { Default: { - Label: Text.TextColors.Secondary, - Outline: Layer['2'].Outline, + Label: Chad.Text.FilledFeedback.highlight.secondary, + Fill: Color.Primary['950'], }, Hover: { - Label: Text.TextColors.Highlight, - Outline: Layer.Highlight.Outline, + Label: Color.Neutral['50'], + Fill: Color.Primary['800'], }, Current: { Label: Text.TextColors.Primary, + Fill: Layer['1'].Fill, Outline: Color.Primary['500'], }, - 'Container border': Layer['1'].Outline, }, OverLined: { Default: { @@ -1170,6 +1204,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, Transition: 'Transition', } as const + const Chips = { Default: { Label: Text.TextColors.Secondary, @@ -1190,6 +1225,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) NonClickable: '0', }, } as const + const Badges = { Border: { Default: Chad.Badges.Border.Default, @@ -1216,7 +1252,12 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Accent: Chad.Badges.Fill.Accent, }, } as const + const Chart = { + LiquidationZone: { + Current: Yellows['400'], + Future: Blues['200'], + }, Candles: { Positive: Greens['400'], Negative: Reds['600'], @@ -1226,13 +1267,10 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Negative: Reds['600'], Line1: Color.Primary['500'], Line2: Yellows['500'], - 'Line 3': Color.Secondary['500'], - }, - LiquidationZone: { - Current: Yellows['400'], - Future: Blues['200'], + Line3: Color.Secondary['500'], }, } as const + const Toggles = { Default: { Label: Text.TextColors.Primary, @@ -1247,10 +1285,11 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Fill: Color.Primary['800'], }, } as const + const Table = { Header: { Fill: Chad.Tables.Header.Fill, - Label: { + 'Label_&_icon': { Default: Chad.Tables.Header.Label.Default, Hover: Chad.Tables.Header.Label.Active, Active: Chad.Tables.Header.Label.Active, @@ -1262,7 +1301,9 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) Hover: Chad.Tables.Row.Hover, }, } as const + const InputBaseDefaultFill = Grays['100'] + const Inputs = { Base: { Default: { @@ -1272,9 +1313,9 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, Border: { Default: Grays['200'], - Error: Reds['500'], Active: Violets['400'], Filled: Violets['600'], + Error: Reds['500'], }, }, Nested: { @@ -1295,6 +1336,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, }, } as const + const Sliders = { default: { SliderThumbImage: '/mui/slider-thumb-white.svg', @@ -1306,8 +1348,9 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad) }, SliderBackground: { ...SliderBackground, Filled: { 100: Color.Primary[200] } }, } as const + const Switch = { - Default: { Fill: Layer['1'].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, + Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] }, Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] }, } as const