Skip to content

Commit

Permalink
feat: updated theme semantic and color tokens, and input recipe
Browse files Browse the repository at this point in the history
  • Loading branch information
@BLuEScioN
BLuEScioN committed Jan 30, 2025
1 parent 8570829 commit 921b2c3
Show file tree
Hide file tree
Showing 5 changed files with 265 additions and 36 deletions.
16 changes: 3 additions & 13 deletions src/ui/Input.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HTMLInputElement, InputProps>(({ children, ...rest }, ref) => (
// <CUIInput ref={ref} {...rest}>
// {children}
// </CUIInput>
// ));
import {
Input as CUIInput,
InputProps as CUIInputProps,
Expand All @@ -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<typeof inputSlotRecipe>;
type InputVariantProps = RecipeVariantProps<typeof inputRecipe>;
export type InputProps = CUIInputProps & InputVariantProps;

export const InputBase = forwardRef<HTMLInputElement, InputProps>(
Expand All @@ -31,4 +21,4 @@ export const InputBase = forwardRef<HTMLInputElement, InputProps>(
)
);

export const Input = chakra(InputBase, inputSlotRecipe);
export const Input = chakra(InputBase, inputRecipe);
34 changes: 33 additions & 1 deletion src/ui/theme/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ export const NEW_COLORS = {
'testnet-600': { value: '#593FE0' },
},
contract: {
// TODO: remove
call: { value: '#BDC2A6' },
deploy: { value: '#D4E523' },
},
Expand All @@ -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' },
Expand All @@ -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' },
},
};
51 changes: 32 additions & 19 deletions src/ui/theme/recipes/InputRecipe.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
},
},
},
Expand Down
196 changes: 195 additions & 1 deletion src/ui/theme/semanticTokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}' },
Expand Down Expand Up @@ -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}' },
Expand Down Expand Up @@ -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}' },
},
},
},
};
Expand Down
Loading

0 comments on commit 921b2c3

Please sign in to comment.