Skip to content

Commit

Permalink
chore: consume design tokens from extension
Browse files Browse the repository at this point in the history
  • Loading branch information
@pete-watters
pete-watters committed Dec 4, 2023
1 parent fcbf0d7 commit 0e52e5f
Show file tree
Hide file tree
Showing 8 changed files with 21 additions and 423 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,7 @@
"@actions/core": "1.10.1",
"@btckit/types": "0.0.19",
"@leather-wallet/prettier-config": "0.0.1",
"@leather-wallet/tokens": "0.0.2",
"@ls-lint/ls-lint": "2.1.0",
"@pandacss/dev": "0.18.3",
"@playwright/test": "1.38.1",
Expand Down
9 changes: 4 additions & 5 deletions theme/breakpoints.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { breakpoints as leatherBreakpoints } from '@leather-wallet/tokens';

// TODO consider removing this from the tokens package / doing this better
// ts-unused-exports:disable-next-line
export const breakpoints = {
sm: '398px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
...leatherBreakpoints,
};
114 changes: 3 additions & 111 deletions theme/colors.ts
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,7 @@
import { colors as leatherColors } from '@leather-wallet/tokens';
import { defineTokens } from '@pandacss/dev';

// ts-unused-exports:disable-next-line
export const colors = defineTokens.colors({
current: { value: 'currentColor' },
dark: { value: '#111' },
black: { value: '#000' },
white: { value: '#fff' },
lightModeRed: {
100: { value: '#FCEEED' },
300: { value: '#FFABB1' },
500: { value: '#FF5863' },
600: { value: '#FF2E3C' },
},
darkModeRed: {
100: { value: '#38191A' },
300: { value: '#4F1A1D' },
500: { value: '#7C1E24' },
600: { value: '#AB1F29' },
},
lightModeBlue: {
100: { value: '#E6F2FF' },
300: { value: '#9BCAFF' },
500: { value: '#3795FF' },
600: { value: '#057AFF' },
},
darkModeBlue: {
100: { value: '#0C2644' },
300: { value: '#092F5A' },
500: { value: '#053E80' },
600: { value: '#004EA6' },
},
lightModeYellow: {
100: { value: '#FEF9E6' },
300: { value: '#FBE699' },
500: { value: '#F7CD33' },
600: { value: '#F5C000' },
},
darkModeYellow: {
100: { value: '#473D1C' },
300: { value: '#5C4F21' },
500: { value: '#A98D29' },
600: { value: '#D8B021' },
},
lightModeGreen: {
100: { value: '#E6F5ED' },
300: { value: '#99D8B9' },
500: { value: '#33B172' },
600: { value: '#009E4F' },
},
darkModeGreen: {
100: { value: '#1A3124' },
300: { value: '#19422C' },
500: { value: '#165C38' },
600: { value: '#00753A' },
},
lightModeBrown: {
1: { value: '#FFFFFF' },
2: { value: '#F7F5F3' },
3: { value: '#F5F1ED' },
4: { value: '#EAE5E0' },
5: { value: '#E4DDD6' },
6: { value: '#DED6CD' },
7: { value: '#D8CEC4' },
8: { value: '#948677' },
9: { value: '#948677' },
10: { value: '#64594D' },
11: { value: '#4A423B' },
12: { value: '#12100F' },
},
darkModeBrown: {
1: { value: '#12100F' },
2: { value: '#2C2A24' },
3: { value: '#4A423B' },
4: { value: '#34312A' },
5: { value: '#12100F' },
6: { value: '#716A60' },
7: { value: '#8F887D' },
8: { value: '#948677' },
9: { value: '#F5F1ED' },
10: { value: '#DED6CD' },
11: { value: '#DED6CD' },
12: { value: '#F5F1ED' },
},
lightModeInk: {
1: { value: '#FFFFFF' },
2: { value: '#F9F9F9' },
3: { value: '#F1F1F1' },
4: { value: '#EBEBEB' },
5: { value: '#E4E4E4' },
6: { value: '#DDDDDD' },
7: { value: '#D4D4D4' },
8: { value: '#BBBBBB' },
9: { value: '#8D8D8D' },
10: { value: '#808080' },
11: { value: '#646464' },
12: { value: '#12100F' },
},
darkModeInk: {
1: { value: '#12100F' },
2: { value: '#1B1B1B' },
3: { value: '#282828' },
4: { value: '#303030' },
5: { value: '#373737' },
6: { value: '#3F3F3F' },
7: { value: '#4A4A4A' },
8: { value: '#606060' },
9: { value: '#6E6E6E' },
10: { value: '#818181' },
11: { value: '#B1B1B1' },
12: { value: '#EEEEEE' },
},
lightModeStacks: { value: '#5546FF' },
darkModeStacks: { value: '#7F80FF' },
overlay: { value: 'rgba(0,0,0,0.4)' },
...leatherColors,
});
43 changes: 2 additions & 41 deletions theme/keyframes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,7 @@
import { keyframes as leatherKeyframes } from '@leather-wallet/tokens';
import { CssKeyframes } from 'leather-styles/types/system-types';

// ts-unused-exports:disable-next-line
export const keyframes: CssKeyframes = {
fadein: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeout: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
shine: {
'0%': {
backgroundPosition: '-50px',
},
'100%': {
backgroundPosition: '500px',
},
},
rotate: {
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
},
// TODO: identical to above, remove
spin: {
'0%': {
transform: 'rotate(0deg)',
},
'100%': {
transform: 'rotate(360deg)',
},
},
animatedTick: {
from: {
strokeDashoffset: 350,
},
to: {
strokeDashoffset: 0,
},
},
...leatherKeyframes,
};
107 changes: 2 additions & 105 deletions theme/semantic-tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,7 @@
import { semanticTokens as leatherSemanticTokens } from '@leather-wallet/tokens';
import { defineSemanticTokens } from '@pandacss/dev';

// ts-unused-exports:disable-next-line
export const semanticTokens = defineSemanticTokens({
colors: {
// Primative colours defined as semantic tokens to match Radix
brown: {
1: { value: { base: '{colors.lightModeBrown.1}', _dark: '{colors.darkModeBrown.1}' } },
2: { value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.2}' } },
3: { value: { base: '{colors.lightModeBrown.3}', _dark: '{colors.darkModeBrown.3}' } },
4: { value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.4}' } },
5: { value: { base: '{colors.lightModeBrown.5}', _dark: '{colors.darkModeBrown.5}' } },
6: { value: { base: '{colors.lightModeBrown.6}', _dark: '{colors.darkModeBrown.6}' } },
7: { value: { base: '{colors.lightModeBrown.7}', _dark: '{colors.darkModeBrown.7}' } },
8: { value: { base: '{colors.lightModeBrown.8}', _dark: '{colors.darkModeBrown.8}' } },
9: { value: { base: '{colors.lightModeBrown.9}', _dark: '{colors.darkModeBrown.9}' } },
10: { value: { base: '{colors.lightModeBrown.10}', _dark: '{colors.darkModeBrown.10}' } },
11: { value: { base: '{colors.lightModeBrown.11}', _dark: '{colors.darkModeBrown.11}' } },
12: { value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' } },
},
ink: {
1: { value: { base: '{colors.lightModeInk.1}', _dark: '{colors.darkModeInk.1}' } },
2: { value: { base: '{colors.lightModeInk.2}', _dark: '{colors.darkModeInk.2}' } },
3: { value: { base: '{colors.lightModeInk.3}', _dark: '{colors.darkModeInk.3}' } },
4: { value: { base: '{colors.lightModeInk.4}', _dark: '{colors.darkModeInk.4}' } },
5: { value: { base: '{colors.lightModeInk.5}', _dark: '{colors.darkModeInk.5}' } },
6: { value: { base: '{colors.lightModeInk.6}', _dark: '{colors.darkModeInk.6}' } },
7: { value: { base: '{colors.lightModeInk.7}', _dark: '{colors.darkModeInk.7}' } },
8: { value: { base: '{colors.lightModeInk.8}', _dark: '{colors.darkModeInk.8}' } },
9: { value: { base: '{colors.lightModeInk.9}', _dark: '{colors.darkModeInk.9}' } },
10: { value: { base: '{colors.lightModeInk.10}', _dark: '{colors.darkModeInk.10}' } },
11: { value: { base: '{colors.lightModeInk.11}', _dark: '{colors.darkModeInk.11}' } },
12: { value: { base: '{colors.lightModeInk.12}', _dark: '{colors.darkModeInk.12}' } },
},
accent: {
'text-primary': {
value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' },
},
'text-subdued': {
value: { base: '{colors.lightModeBrown.8}', _dark: '{colors.darkModeBrown.8}' },
},
'action-primary-hover': {
value: { base: '{colors.lightModeBrown.10}', _dark: '{colors.darkModeBrown.10}' },
},
'action-primary-default': {
value: { base: '{colors.lightModeBrown.9}', _dark: '{colors.darkModeBrown.9}' },
},
'border-hover': {
value: { base: '{colors.lightModeBrown.5}', _dark: '{colors.darkModeBrown.8}' },
},
'border-default': {
value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.7}' },
},
'non-interactive': {
value: { base: '{colors.lightModeBrown.7}', _dark: '{colors.darkModeBrown.6}' },
},
'component-background-pressed': {
value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.5}' },
},
'component-background-hover': {
value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.4}' },
},
'component-background-default': {
value: { base: '{colors.lightModeBrown.3}', _dark: '{colors.darkModeBrown.3}' },
},
'background-secondary': {
value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.2}' },
},
'background-primary': {
value: { base: '{colors.lightModeBrown.1}', _dark: '{colors.darkModeBrown.1}' },
},
'notification-text': {
value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' },
},
},
disabled: {
value: { base: '{colors.lightModeBlue.100}', _dark: '{colors.darkModeBlue.100}' },
},
error: {
background: {
value: { base: '{colors.lightModeRed.100}', _dark: '{colors.darkModeRed.100}' },
},
label: {
value: { base: '{colors.lightModeRed.600}', _dark: '{colors.darkModeRed.600}' },
},
},
invert: {
value: { base: '{colors.darkModeBrown.1}', _dark: '{colors.lightModeBrown.1}' },
},
stacks: {
value: { base: '{colors.lightModeStacks}', _dark: '{colors.darkModeStacks}' },
},
success: {
background: {
value: { base: '{colors.lightModeGreen.100}', _dark: '{colors.darkModeGreen.100}' },
},
label: {
value: { base: '{colors.lightModeGreen.600}', _dark: '{colors.darkModeGreen.600}' },
},
},
warning: {
background: {
value: { base: '{colors.lightModeYellow.100}', _dark: '{colors.darkModeYellow.100}' },
},
label: {
value: { base: '{colors.lightModeYellow.600}', _dark: '{colors.darkModeYellow.600}' },
},
},
},
...leatherSemanticTokens,
});
57 changes: 2 additions & 55 deletions theme/tokens.ts
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,7 @@
import { tokens as leatherTokens } from '@leather-wallet/tokens';
import { defineTokens } from '@pandacss/dev';

import { colors } from './colors';

// ts-unused-exports:disable-next-line
export const tokens = defineTokens({
animations: {
spin: {
value: 'spin 1s linear infinite',
},
},
sizes: {
centeredPageFullWidth: { value: '500px' },
desktopViewportMinWidth: { value: '480px' },
xs: { value: '12px' },
sm: { value: '16px' },
md: { value: '24px' },
lg: { value: '30px' },
xl: { value: '36px' },
},
radii: {
xs: { value: '8px' },
sm: { value: '10px' },
md: { value: '12px' },
lg: { value: '16px' },
xl: { value: '20px' },
xxl: { value: '24px' },
},
spacing: {
// Numbers are padded with 0 to ensure they are sorted correctly in TS
// autocomplete. When typing, mt="04" + enter key, will jump straight to the
// spacing value you need.
'space.00': { value: '0' },
'space.01': { value: '4px', description: '4px' },
'space.02': { value: '8px', description: '8px' },
'space.03': { value: '12px', description: '12px' },
'space.04': { value: '16px', description: '16px' },
'space.05': { value: '24px', description: '24px' },
'space.06': { value: '32px', description: '32px' },
'space.07': { value: '40px', description: '40px' },
'space.08': { value: '48px', description: '48px' },
'space.09': { value: '64px', description: '64px' },
'space.10': { value: '72px', description: '72px' },
'space.11': { value: '128px', description: '128px' },
},
colors,
borders: {
action: { value: '1px solid {colors.accent.action-primary-default}' },
active: { value: '2px solid {colors.accent.border-default}' },
background: { value: '2px solid {colors.accent.background-primary}' },
dashed: { value: '2px dashed {colors.accent.component-background-default}' },
default: { value: '1px solid {colors.accent.border-default}' },
error: { value: '1px solid {colors.error.label}' },
focus: { value: '2px solid {colors.accent.action-primary-default}' },
invert: { value: '1px solid {colors.invert}' },
subdued: { value: '1px solid {colors.accent.text-subdued}' },
warning: { value: '1px solid {colors.warning.label}' },
},
transition: { value: 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)' },
...leatherTokens,
});
Loading

0 comments on commit 0e52e5f

Please sign in to comment.