Skip to content

Instantly share code, notes, and snippets.

@filipalacerda
Last active May 16, 2024 17:58
Show Gist options
  • Save filipalacerda/7378ca6e21ab07a2f7ea92b55fa344a2 to your computer and use it in GitHub Desktop.
Save filipalacerda/7378ca6e21ab07a2f7ea92b55fa344a2 to your computer and use it in GitHub Desktop.
New semantic tokens name proposal
{
info: {
main:
light:
dark:
},
success: {
main:
light:
dark:
},
warning: {
main:
light:
dark:
},
error: {
main:
light:
dark:
},
actions: {
primary: {
main:
light:
dark:
extraLight: // our tokens
contrastText:
},
secondary: {
main:
light:
dark:
},
tertiary: {
main:
light:
dark:
},
destructive: {
main:
light:
dark:
},
},
border: {
default
white
},
background: {
paper:
default:
},
common: {
black:
white:
},
icons: {
default: theme.palette.color.neutrals.gray[800],
white: theme.palette.color.neutrals.base.white,
brand: theme.palette.color.primaries.emerald[600],
accent1: theme.palette.color.accents.fuchsia[500],
accent2: theme.palette.color.accents.sunflower[500],
}.
surface: {
body: theme.palette.color.neutrals.gray[100],
white: theme.palette.color.neutrals.base.white,
subtle: theme.palette.color.neutrals.gray[200],
logo: theme.palette.color.accents.ruby[700],
},
text: {
primary:
secondary:
subtle:
inactive:
disabled:
white:
brand:
info:
success:
warning:
error:
// new one
heading //maps to info.dark
},
gradient: {
hsa:
xra:
roleSelection:
},
grey: {
// use MUI - https://mui.com/material-ui/customization/default-theme/?expand-path=$.palette.background#:~:text=%23fff-,grey,-%3A%20Object
},
// Do we want to keep neutral or do we replace the usage with the tokens above?
neutral: {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment