From 921b2c38b3d4c9189203258314f4423c467901d4 Mon Sep 17 00:00:00 2001 From: Nicholas Barnett Date: Thu, 30 Jan 2025 15:33:43 -0600 Subject: [PATCH] feat: updated theme semantic and color tokens, and input recipe --- src/ui/Input.tsx | 16 +-- src/ui/theme/colors.ts | 34 ++++- src/ui/theme/recipes/InputRecipe.ts | 51 +++++--- src/ui/theme/semanticTokens.ts | 196 +++++++++++++++++++++++++++- src/ui/theme/theme.ts | 4 +- 5 files changed, 265 insertions(+), 36 deletions(-) diff --git a/src/ui/Input.tsx b/src/ui/Input.tsx index 849243dc5..6519bf36f 100644 --- a/src/ui/Input.tsx +++ b/src/ui/Input.tsx @@ -1,13 +1,5 @@ 'use client'; -// import { Input as CUIInput, InputProps as CUIInputProps } from '@chakra-ui/react'; -// import { forwardRef } from 'react'; -// export type InputProps = CUIInputProps; -// export const Input = forwardRef(({ children, ...rest }, ref) => ( -// -// {children} -// -// )); import { Input as CUIInput, InputProps as CUIInputProps, @@ -16,11 +8,9 @@ import { } from '@chakra-ui/react'; import { forwardRef } from 'react'; -import { inputSlotRecipe } from './theme/recipes/InputRecipe'; +import { inputRecipe } from './theme/recipes/InputRecipe'; -// Usually for slot recipes there is a snippet but not for this one... - -type InputVariantProps = RecipeVariantProps; +type InputVariantProps = RecipeVariantProps; export type InputProps = CUIInputProps & InputVariantProps; export const InputBase = forwardRef( @@ -31,4 +21,4 @@ export const InputBase = forwardRef( ) ); -export const Input = chakra(InputBase, inputSlotRecipe); +export const Input = chakra(InputBase, inputRecipe); diff --git a/src/ui/theme/colors.ts b/src/ui/theme/colors.ts index 3e55e51b4..470e4b7de 100644 --- a/src/ui/theme/colors.ts +++ b/src/ui/theme/colors.ts @@ -124,6 +124,7 @@ export const NEW_COLORS = { 'testnet-600': { value: '#593FE0' }, }, contract: { + // TODO: remove call: { value: '#BDC2A6' }, deploy: { value: '#D4E523' }, }, @@ -138,14 +139,25 @@ export const NEW_COLORS = { 'sand-alpha-700': { value: 'rgba(243, 242, 240, 0.64)' }, 'sand-alpha-800': { value: 'rgba(243, 242, 240, 0.80)' }, 'sand-alpha-900': { value: 'rgba(243, 242, 240, 0.92)' }, + 'black-alpha-50': { value: 'rgba(20, 20, 20, 0.04)' }, + 'black-alpha-100': { value: 'rgba(20, 20, 20, 0.06)' }, + 'black-alpha-200': { value: 'rgba(20, 20, 20, 0.08)' }, + 'black-alpha-300': { value: 'rgba(20, 20, 20, 0.16)' }, + 'black-alpha-400': { value: 'rgba(20, 20, 20, 0.24)' }, + 'black-alpha-500': { value: 'rgba(20, 20, 20, 0.36)' }, + 'black-alpha-600': { value: 'rgba(20, 20, 20, 0.48)' }, + 'black-alpha-700': { value: 'rgba(20, 20, 20, 0.64)' }, + 'black-alpha-800': { value: 'rgba(20, 20, 20, 0.80)' }, + 'black-alpha-900': { value: 'rgba(20, 20, 20, 0.92)' }, }, - status: { + feedback: { 'green-100': { value: '#0070dd' }, 'green-200': { value: '#adddc0' }, 'green-300': { value: '#8ECEAA' }, 'green-400': { value: '#5bb98b' }, 'green-500': { value: '#30a46c' }, 'green-600': { value: '#218358' }, + 'green-900': { value: '#174832' }, 'blue-100': { value: '#e9f3ff' }, 'blue-200': { value: '#dbecff' }, 'blue-300': { value: '#b5d5ff' }, @@ -158,11 +170,31 @@ export const NEW_COLORS = { 'red-400': { value: '#f06e76' }, 'red-500': { value: '#e32a35' }, 'red-600': { value: '#b01425' }, + 'red-900': { value: '#e32a35' }, 'yellow-100': { value: '#fefce9' }, 'yellow-200': { value: '#fff9b7' }, 'yellow-300': { value: '#fff394' }, 'yellow-400': { value: '#f9e972' }, 'yellow-500': { value: '#f3dc00' }, 'yellow-600': { value: '#dbc600' }, + 'yellow-700': { value: '#a99100' }, + 'yellow-900': { value: '#6b5c05' }, + 'bronze-200': { value: '#ffdfc1' }, + 'bronze-600': { value: '#e17c18' }, + 'bronze-900': { value: '#e17c18' }, + }, + secondary: { + 'moss-200': { value: '#d3d6c4' }, + 'moss-400': { value: '#bdc2a6' }, + 'lime-200': { value: '#e6f07f' }, + 'lime-400': { value: '#d4e523' }, + 'pink-200': { value: '#df8ed4' }, + 'pink-400': { value: '#d977cb' }, + 'peach-200': { value: '#ffa57f' }, + 'peach-400': { value: '#ff8761' }, + 'butter-200': { value: '#faf884' }, + 'butter-400': { value: '#f8f65b' }, + 'blood-orange-600': { value: '#fc6432' }, + 'blood-orange-900': { value: '#cc4900' }, }, }; diff --git a/src/ui/theme/recipes/InputRecipe.ts b/src/ui/theme/recipes/InputRecipe.ts index 0e2deb452..3016f512a 100644 --- a/src/ui/theme/recipes/InputRecipe.ts +++ b/src/ui/theme/recipes/InputRecipe.ts @@ -1,25 +1,38 @@ -import { defineSlotRecipe } from '@chakra-ui/react'; +'use client'; -export const inputSlotRecipe = defineSlotRecipe({ +import { defineRecipe } from '@chakra-ui/react'; + +export const inputRecipe = defineRecipe({ className: 'input', - slots: ['root', 'field'], - base: { - root: { - bg: 'blue.500', - _hover: { - '& .checkbox__label': { color: 'white' }, - }, - }, - }, + base: {}, variants: { - visual: { - outline: { - field: { - fontSize: 'sm', - borderColor: 'borderPrimary', - _placeholder: { - color: { base: '{colors.slate.600}', _dark: '{colors.slate.500}' }, - }, + variant: { + primary: { + bg: 'surfaceTertiary', + borderColor: 'borderPrimary', + borderRadius: 'md', + color: 'textPrimary', + _hover: { + '& .checkbox__label': { color: 'white' }, + }, + _focus: { + outline: 'none', + }, + _focusVisible: { + borderColor: { base: '{colors.accent.stacks-200}', _dark: '{colors.accent.stacks-700}' }, + borderWidth: '2px', + }, + _disabled: { + bg: 'surfaceSecondary', + borderColor: 'borderSecondary', + color: 'textTertiary', + }, + _placeholder: { + color: 'textSecondary', + }, + _invalid: { + borderColor: 'feedback.red-500', + borderWidth: '2px', }, }, }, diff --git a/src/ui/theme/semanticTokens.ts b/src/ui/theme/semanticTokens.ts index 6cda11aa6..87e896217 100644 --- a/src/ui/theme/semanticTokens.ts +++ b/src/ui/theme/semanticTokens.ts @@ -62,6 +62,7 @@ export const CURRENT_SEMANTIC_TOKENS = { }, }, }, + // TODO: In a lot of cases, this object notation can be used in-line, so we can remove all of these and just use the object notation. But perhaps we wait to do this until after the redesign blockList: { btcBlockRowText: { value: { base: '{colors.slate.700}', _dark: '{colors.slate.500}' }, @@ -97,6 +98,11 @@ export const CURRENT_SEMANTIC_TOKENS = { value: { base: '{colors.neutral.sand-1000}', _dark: '{colors.neutral.sand-100}' }, }, }, + control: { + bg: { + value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-900}' }, + }, + }, menu: { bg: { value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-900}' }, @@ -242,11 +248,199 @@ export const CURRENT_SEMANTIC_TOKENS = { export const NEW_SEMANTIC_TOKENS = { colors: { + newBorderPrimary: { + value: { base: '{colors.neutral.sand-300}', _dark: '{colors.neutral.sand-600}' }, + }, newBorderSecondary: { value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-700}' }, }, + borderTertiary: { + value: { base: '{colors.neutral.sand-100}', _dark: '{colors.neutral.sand-950}' }, + }, + // TODO: find and replace all the uses of the non-namespaced border semantic color variables + // border: { + // primary: { + // value: { base: '{colors.neutral.sand-300}', _dark: '{colors.neutral.sand-600}' }, + // }, + // secondary: { + // value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-700}' }, + // }, + // tertiary: { + // value: { base: '{colors.neutral.sand-100}', _dark: '{colors.neutral.sand-950}' }, + // }, + // }, iconPrimary: { - value: { base: '{colors.black}', _dark: '{colors.neutral.sand-100}' }, + value: { base: '{colors.neutral.sand-1000}', _dark: '{colors.neutral.sand-100}' }, + }, + iconSecondary: { + value: { base: '{colors.neutral.sand-600}', _dark: '{colors.neutral.sand-400}' }, + }, + iconTertiary: { + value: { base: '{colors.neutral.sand-400}', _dark: '{colors.neutral.sand-500}' }, + }, + iconInvert: { + value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' }, + }, + iconError: { + value: { base: '{colors.feedback.red.500}', _dark: '{colors.feedback.red.400}' }, + }, + // TODO: find and replace all the uses of the non-namespaced icon semantic color variables + // icon: { + // primary: { + // value: { base: '{colors.neutral.sand-1000}', _dark: '{colors.neutral.sand-100}' }, + // }, + // secondary: { + // value: { base: '{colors.neutral.sand-600}', _dark: '{colors.neutral.sand-400}' }, + // }, + // tertiary: { + // value: { base: '{colors.neutral.sand-400}', _dark: '{colors.neutral.sand-500}' }, + // }, + // invert: { + // value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' }, + // }, + // error: { + // value: { base: '{colors.feedback.red-500}', _dark: '{colors.feedback.red-400}' }, + // }, + // }, + surfacePrimary: { + value: { base: '{colors.neutral.sand-150}', _dark: '{colors.neutral.sand-900}' }, + }, + surfaceSecondary: { + value: { base: '{colors.neutral.sand-100}', _dark: '{colors.neutral.sand-950}' }, + }, + surfaceTertiary: { + value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' }, + }, + surfaceFourth: { + value: { base: '{colors.white}', _dark: '{colors.neutral.sand-800}' }, + }, + surfaceFifth: { + value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-700}' }, + }, + surfaceInvert: { + value: { base: '{colors.neutral.sand-800}', _dark: '{colors.neutral.sand-100}' }, + }, + // TODO: find and replace all the uses of the non-namespaced surface semantic color variables + // surface: { + // primary: { + // value: { base: '{colors.neutral.sand-150}', _dark: '{colors.neutral.sand-900}' }, + // }, + // secondary: { + // value: { base: '{colors.neutral.sand-100}', _dark: '{colors.neutral.sand-950}' }, + // }, + // tertiary: { + // value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' }, + // }, + // fourth: { + // value: { base: '{colors.white}', _dark: '{colors.neutral.sand-800}' }, + // }, + // fifth: { + // value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-700}' }, + // }, + // invert: { + // value: { base: '{colors.neutral.sand-800}', _dark: '{colors.neutral.sand-100}' }, + // }, + // }, + textPrimary: { + value: { base: '{colors.neutral.sand-1000}', _dark: '{colors.neutral.sand-100}' }, + }, + textSecondary: { + value: { base: '{colors.neutral.sand-600}', _dark: '{colors.neutral.sand-400}' }, + }, + textTertiary: { + value: { base: '{colors.neutral.sand-400}', _dark: '{colors.neutral.sand-500}' }, + }, + textInteractiveHover: { + value: { base: '{colors.accent.stacks-600}', _dark: '{colors.accent.stacks-400}' }, + }, + textInvert: { + value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' }, + }, + textError: { + value: { base: '{colors.feedback.red-500}', _dark: '{colors.feedback.red-400}' }, + }, + // TODO: find and replace all the uses of the non-namespaced text semantic color variables + // text: { + // primary: { + // value: { base: '{colors.neutral.sand-1000}', _dark: '{colors.neutral.sand-100}' }, + // }, + // secondary: { + // value: { base: '{colors.neutral.sand-600}', _dark: '{colors.neutral.sand-400}' }, + // }, + // tertiary: { + // value: { base: '{colors.neutral.sand-400}', _dark: '{colors.neutral.sand-500}' }, + // }, + // interactive: { + // value: { base: '{colors.accent.stacks-600}', _dark: '{colors.accent.stacks-400}' }, + // }, + // invert: { + // value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' }, + // }, + // error: { + // value: { base: '{colors.feedback.red-500}', _dark: '{colors.feedback.red-400}' }, + // }, + // }, + signerHealth: { + lowSurface: { + value: { base: '{colors.feedback.red-100}', _dark: '{colors.feedback.red-900}' }, + }, + lowAccent: { + value: { base: '{colors.feedback.red-500}', _dark: '{colors.feedback.red-200}' }, + }, + mediumSurface: { + value: { base: '{colors.feedback.yellow-100}', _dark: '{colors.feedback.yellow-900}' }, + }, + mediumAccent: { + value: { base: '{colors.feedback.yellow-700}', _dark: '{colors.feedback.yellow-200}' }, + }, + highSurface: { + value: { base: '{colors.feedback.green-100}', _dark: '{colors.feedback.green-900}' }, + }, + highAccent: { + value: { base: '{colors.feedback.green-600}', _dark: '{colors.feedback.green-200}' }, + }, + }, + signerProposal: { + approved: { + value: { base: '{colors.feedback.green-500}', _dark: '{colors.feedback.green-400}' }, + }, + rejected: { + value: { base: '{colors.feedback.red-500}', _dark: '{colors.feedback.red-400}' }, + }, + }, + transactionStatus: { + failed: { + value: { base: '{colors.feedback.red-150}', _dark: '{colors.feedback.red-900}' }, + }, + pending: { + value: { base: '{colors.feedback.bronze-200}', _dark: '{colors.feedback.bronze-900}' }, + }, + confirmed: { + value: { base: '{colors.feedback.green-150}', _dark: '{colors.feedback.green-900}' }, + }, + }, + transactionTypes: { + contractCall: { + value: { base: '{colors.secondary.moss-200}', _dark: '{colors.secondary.moss-400}' }, + }, + contractDeploy: { + value: { base: '{colors.secondary.lime-200}', _dark: '{colors.secondary.lime-400}' }, + }, + tokenTransfer: { + value: { base: '{colors.secondary.peach-200}', _dark: '{colors.secondary.peach-400}' }, + }, + tenureStart: { + value: { + base: '{colors.secondary.blood-orange-200}', + _dark: '{colors.secondary.blood-orange-400}', + }, + }, + tenureExtension: { + value: { base: '{colors.secondary.pink-200}', _dark: '{colors.secondary.pink-400}' }, + }, + tenureChange: { + value: { base: '{colors.secondary.butter-200}', _dark: '{colors.secondary.butter-400}' }, + }, }, }, }; diff --git a/src/ui/theme/theme.ts b/src/ui/theme/theme.ts index 92f11011c..5b694c1ee 100644 --- a/src/ui/theme/theme.ts +++ b/src/ui/theme/theme.ts @@ -15,7 +15,7 @@ import { badgeRecipe } from './recipes/BadgeRecipe'; import { buttonRecipe } from './recipes/ButtonRecipe'; import { checkboxSlotRecipe } from './recipes/CheckboxRecipe'; import { iconButtonRecipe } from './recipes/IconButtonRecipe'; -import { inputSlotRecipe } from './recipes/InputRecipe'; +import { inputRecipe } from './recipes/InputRecipe'; import { linkRecipe } from './recipes/LinkRecipe'; import { menuSlotRecipe } from './recipes/MenuRecipe'; import { switchSlotRecipe } from './recipes/SwitchRecipe'; @@ -41,10 +41,10 @@ const themeConfig = { link: linkRecipe, badge: badgeRecipe, iconButton: iconButtonRecipe, + input: inputRecipe, }, slotRecipes: { checkbox: checkboxSlotRecipe, - input: inputSlotRecipe, menu: menuSlotRecipe, switch: switchSlotRecipe, tabs: tabsSlotRecipe,