♻️(tokens) refactor tokens architectures
Rework the way the object is structured.
This commit is contained in:
Nathan Panchout
committed by
NathanVss
NathanVss
parent
e24845b427
commit
afeddd5850
@@ -421,344 +421,676 @@ export const globals = {
|
|||||||
breakpoints,
|
breakpoints,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultTheme = {
|
export const contextuaDefault = {
|
||||||
globals,
|
background: {
|
||||||
contextuals: {
|
surface: {
|
||||||
background: {
|
primary: "ref(globals.colors.gray-000)",
|
||||||
surface: {
|
secondary: "ref(globals.colors.gray-000)",
|
||||||
primary: "ref(globals.colors.gray-000)",
|
tertiary: "ref(globals.colors.gray-025)",
|
||||||
secondary: "ref(globals.colors.gray-000)",
|
},
|
||||||
tertiary: "ref(globals.colors.gray-025)",
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.brand-650)",
|
||||||
|
secondary: "ref(globals.colors.brand-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.brand-150)",
|
||||||
|
tertiary: "ref(globals.colors.brand-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.brand-100)",
|
||||||
},
|
},
|
||||||
semantic: {
|
neutral: {
|
||||||
brand: {
|
primary: "ref(globals.colors.gray-550)",
|
||||||
primary: "ref(globals.colors.brand-550)",
|
"primary-hover": "ref(globals.colors.gray-650)",
|
||||||
"primary-hover": "ref(globals.colors.brand-650)",
|
secondary: "ref(globals.colors.gray-100)",
|
||||||
secondary: "ref(globals.colors.brand-100)",
|
"secondary-hover": "ref(globals.colors.gray-150)",
|
||||||
"secondary-hover": "ref(globals.colors.brand-150)",
|
tertiary: "ref(globals.colors.gray-050)",
|
||||||
tertiary: "ref(globals.colors.brand-050)",
|
"tertiary-hover": "ref(globals.colors.gray-100)",
|
||||||
"tertiary-hover": "ref(globals.colors.brand-100)",
|
|
||||||
},
|
|
||||||
neutral: {
|
|
||||||
primary: "ref(globals.colors.gray-550)",
|
|
||||||
"primary-hover": "ref(globals.colors.gray-650)",
|
|
||||||
secondary: "ref(globals.colors.gray-100)",
|
|
||||||
"secondary-hover": "ref(globals.colors.gray-150)",
|
|
||||||
tertiary: "ref(globals.colors.gray-050)",
|
|
||||||
"tertiary-hover": "ref(globals.colors.gray-100)",
|
|
||||||
},
|
|
||||||
contextual: {
|
|
||||||
primary: "ref(globals.colors.black-050)",
|
|
||||||
"primary-hover": "ref(globals.colors.black-100)",
|
|
||||||
},
|
|
||||||
info: {
|
|
||||||
primary: "ref(globals.colors.info-550)",
|
|
||||||
"primary-hover": "ref(globals.colors.info-650)",
|
|
||||||
secondary: "ref(globals.colors.info-100)",
|
|
||||||
"secondary-hover": "ref(globals.colors.info-150)",
|
|
||||||
tertiary: "ref(globals.colors.info-050)",
|
|
||||||
"tertiary-hover": "ref(globals.colors.info-100)",
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
primary: "ref(globals.colors.success-550)",
|
|
||||||
"primary-hover": "ref(globals.colors.success-650)",
|
|
||||||
secondary: "ref(globals.colors.success-100)",
|
|
||||||
"secondary-hover": "ref(globals.colors.success-150)",
|
|
||||||
tertiary: "ref(globals.colors.success-050)",
|
|
||||||
"tertiary-hover": "ref(globals.colors.success-100)",
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
primary: "ref(globals.colors.warning-550)",
|
|
||||||
"primary-hover": "ref(globals.colors.warning-650)",
|
|
||||||
secondary: "ref(globals.colors.warning-100)",
|
|
||||||
"secondary-hover": "ref(globals.colors.warning-150)",
|
|
||||||
tertiary: "ref(globals.colors.warning-050)",
|
|
||||||
"tertiary-hover": "ref(globals.colors.warning-100)",
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
primary: "ref(globals.colors.error-550)",
|
|
||||||
"primary-hover": "ref(globals.colors.error-650)",
|
|
||||||
secondary: "ref(globals.colors.error-100)",
|
|
||||||
"secondary-hover": "ref(globals.colors.error-150)",
|
|
||||||
tertiary: "ref(globals.colors.error-050)",
|
|
||||||
"tertiary-hover": "ref(globals.colors.error-100)",
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
primary: "ref(globals.colors.gray-100)",
|
|
||||||
secondary: "ref(globals.colors.gray-050)",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
palette: {
|
contextual: {
|
||||||
brand: {
|
|
||||||
primary: "ref(globals.colors.brand-500)",
|
|
||||||
secondary: "ref(globals.colors.brand-350)",
|
|
||||||
tertiary: "ref(globals.colors.brand-150)",
|
|
||||||
},
|
|
||||||
red: {
|
|
||||||
primary: "ref(globals.colors.red-500)",
|
|
||||||
secondary: "ref(globals.colors.red-350)",
|
|
||||||
tertiary: "ref(globals.colors.red-150)",
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
primary: "ref(globals.colors.orange-500)",
|
|
||||||
secondary: "ref(globals.colors.orange-350)",
|
|
||||||
tertiary: "ref(globals.colors.orange-150)",
|
|
||||||
},
|
|
||||||
brown: {
|
|
||||||
primary: "ref(globals.colors.brown-500)",
|
|
||||||
secondary: "ref(globals.colors.brown-350)",
|
|
||||||
tertiary: "ref(globals.colors.brown-150)",
|
|
||||||
},
|
|
||||||
yellow: {
|
|
||||||
primary: "ref(globals.colors.yellow-500)",
|
|
||||||
secondary: "ref(globals.colors.yellow-350)",
|
|
||||||
tertiary: "ref(globals.colors.yellow-150)",
|
|
||||||
},
|
|
||||||
green: {
|
|
||||||
primary: "ref(globals.colors.green-500)",
|
|
||||||
secondary: "ref(globals.colors.green-350)",
|
|
||||||
tertiary: "ref(globals.colors.green-150)",
|
|
||||||
},
|
|
||||||
"blue-1": {
|
|
||||||
primary: "ref(globals.colors.blue-1-500)",
|
|
||||||
secondary: "ref(globals.colors.blue-1-350)",
|
|
||||||
tertiary: "ref(globals.colors.blue-1-150)",
|
|
||||||
},
|
|
||||||
"blue-2": {
|
|
||||||
primary: "ref(globals.colors.blue-2-500)",
|
|
||||||
secondary: "ref(globals.colors.blue-2-350)",
|
|
||||||
tertiary: "ref(globals.colors.blue-2-150)",
|
|
||||||
},
|
|
||||||
purple: {
|
|
||||||
primary: "ref(globals.colors.purple-500)",
|
|
||||||
secondary: "ref(globals.colors.purple-350)",
|
|
||||||
tertiary: "ref(globals.colors.purple-150)",
|
|
||||||
},
|
|
||||||
pink: {
|
|
||||||
primary: "ref(globals.colors.pink-500)",
|
|
||||||
secondary: "ref(globals.colors.pink-350)",
|
|
||||||
tertiary: "ref(globals.colors.pink-150)",
|
|
||||||
},
|
|
||||||
gray: {
|
|
||||||
primary: "ref(globals.colors.gray-500)",
|
|
||||||
secondary: "ref(globals.colors.gray-350)",
|
|
||||||
tertiary: "ref(globals.colors.gray-150)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
primary: "ref(globals.colors.black-050)",
|
primary: "ref(globals.colors.black-050)",
|
||||||
|
"primary-hover": "ref(globals.colors.black-100)",
|
||||||
},
|
},
|
||||||
},
|
info: {
|
||||||
content: {
|
primary: "ref(globals.colors.info-550)",
|
||||||
logo1: "ref(globals.colors.logo-1)",
|
"primary-hover": "ref(globals.colors.info-650)",
|
||||||
logo2: "ref(globals.colors.logo-2)",
|
secondary: "ref(globals.colors.info-100)",
|
||||||
semantic: {
|
"secondary-hover": "ref(globals.colors.info-150)",
|
||||||
brand: {
|
tertiary: "ref(globals.colors.info-050)",
|
||||||
primary: "ref(globals.colors.brand-700)",
|
"tertiary-hover": "ref(globals.colors.info-100)",
|
||||||
secondary: "ref(globals.colors.brand-600)",
|
|
||||||
tertiary: "ref(globals.colors.brand-500)",
|
|
||||||
"on-brand": "ref(globals.colors.brand-050)",
|
|
||||||
},
|
|
||||||
neutral: {
|
|
||||||
primary: "ref(globals.colors.gray-850)",
|
|
||||||
secondary: "ref(globals.colors.gray-600)",
|
|
||||||
tertiary: "ref(globals.colors.gray-500)",
|
|
||||||
"on-neutral": "ref(globals.colors.gray-050)",
|
|
||||||
},
|
|
||||||
contextual: {
|
|
||||||
primary: "ref(globals.colors.white-950)",
|
|
||||||
},
|
|
||||||
info: {
|
|
||||||
primary: "ref(globals.colors.info-700)",
|
|
||||||
secondary: "ref(globals.colors.info-600)",
|
|
||||||
tertiary: "ref(globals.colors.info-500)",
|
|
||||||
"on-info": "ref(globals.colors.info-050)",
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
primary: "ref(globals.colors.success-700)",
|
|
||||||
secondary: "ref(globals.colors.success-600)",
|
|
||||||
tertiary: "ref(globals.colors.success-500)",
|
|
||||||
"on-success": "ref(globals.colors.success-050)",
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
primary: "ref(globals.colors.warning-700)",
|
|
||||||
secondary: "ref(globals.colors.warning-600)",
|
|
||||||
tertiary: "ref(globals.colors.warning-500)",
|
|
||||||
"on-warning": "ref(globals.colors.warning-050)",
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
primary: "ref(globals.colors.error-700)",
|
|
||||||
secondary: "ref(globals.colors.error-600)",
|
|
||||||
tertiary: "ref(globals.colors.error-500)",
|
|
||||||
"on-error": "ref(globals.colors.error-050)",
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
primary: "ref(globals.colors.gray-300)",
|
|
||||||
secondary: "ref(globals.colors.white-500)",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
palette: {
|
success: {
|
||||||
brand: {
|
primary: "ref(globals.colors.success-550)",
|
||||||
primary: "ref(globals.colors.brand-500)",
|
"primary-hover": "ref(globals.colors.success-650)",
|
||||||
secondary: "ref(globals.colors.brand-350)",
|
secondary: "ref(globals.colors.success-100)",
|
||||||
tertiary: "ref(globals.colors.brand-150)",
|
"secondary-hover": "ref(globals.colors.success-150)",
|
||||||
},
|
tertiary: "ref(globals.colors.success-050)",
|
||||||
red: {
|
"tertiary-hover": "ref(globals.colors.success-100)",
|
||||||
primary: "ref(globals.colors.red-500)",
|
|
||||||
secondary: "ref(globals.colors.red-350)",
|
|
||||||
tertiary: "ref(globals.colors.red-150)",
|
|
||||||
},
|
|
||||||
orange: {
|
|
||||||
primary: "ref(globals.colors.orange-500)",
|
|
||||||
secondary: "ref(globals.colors.orange-350)",
|
|
||||||
tertiary: "ref(globals.colors.orange-150)",
|
|
||||||
},
|
|
||||||
brown: {
|
|
||||||
primary: "ref(globals.colors.brown-500)",
|
|
||||||
secondary: "ref(globals.colors.brown-350)",
|
|
||||||
tertiary: "ref(globals.colors.brown-150)",
|
|
||||||
},
|
|
||||||
yellow: {
|
|
||||||
primary: "ref(globals.colors.yellow-500)",
|
|
||||||
secondary: "ref(globals.colors.yellow-350)",
|
|
||||||
tertiary: "ref(globals.colors.yellow-150)",
|
|
||||||
},
|
|
||||||
green: {
|
|
||||||
primary: "ref(globals.colors.green-500)",
|
|
||||||
secondary: "ref(globals.colors.green-350)",
|
|
||||||
tertiary: "ref(globals.colors.green-150)",
|
|
||||||
},
|
|
||||||
"blue-1": {
|
|
||||||
primary: "ref(globals.colors.blue-1-500)",
|
|
||||||
secondary: "ref(globals.colors.blue-1-350)",
|
|
||||||
tertiary: "ref(globals.colors.blue-1-150)",
|
|
||||||
},
|
|
||||||
"blue-2": {
|
|
||||||
primary: "ref(globals.colors.blue-2-500)",
|
|
||||||
secondary: "ref(globals.colors.blue-2-350)",
|
|
||||||
tertiary: "ref(globals.colors.blue-2-150)",
|
|
||||||
},
|
|
||||||
purple: {
|
|
||||||
primary: "ref(globals.colors.purple-500)",
|
|
||||||
secondary: "ref(globals.colors.purple-350)",
|
|
||||||
tertiary: "ref(globals.colors.purple-150)",
|
|
||||||
},
|
|
||||||
pink: {
|
|
||||||
primary: "ref(globals.colors.pink-500)",
|
|
||||||
secondary: "ref(globals.colors.pink-350)",
|
|
||||||
tertiary: "ref(globals.colors.pink-150)",
|
|
||||||
},
|
|
||||||
gray: {
|
|
||||||
primary: "ref(globals.colors.gray-500)",
|
|
||||||
secondary: "ref(globals.colors.gray-350)",
|
|
||||||
tertiary: "ref(globals.colors.gray-150)",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
warning: {
|
||||||
border: {
|
primary: "ref(globals.colors.warning-550)",
|
||||||
surface: {
|
"primary-hover": "ref(globals.colors.warning-650)",
|
||||||
|
secondary: "ref(globals.colors.warning-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.warning-150)",
|
||||||
|
tertiary: "ref(globals.colors.warning-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.warning-100)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.error-650)",
|
||||||
|
secondary: "ref(globals.colors.error-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.error-150)",
|
||||||
|
tertiary: "ref(globals.colors.error-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.error-100)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
primary: "ref(globals.colors.gray-100)",
|
primary: "ref(globals.colors.gray-100)",
|
||||||
|
secondary: "ref(globals.colors.gray-050)",
|
||||||
},
|
},
|
||||||
semantic: {
|
},
|
||||||
brand: {
|
palette: {
|
||||||
primary: "ref(globals.colors.brand-550)",
|
brand: {
|
||||||
secondary: "ref(globals.colors.brand-300)",
|
primary: "ref(globals.colors.brand-500)",
|
||||||
tertiary: "ref(globals.colors.brand-150)",
|
secondary: "ref(globals.colors.brand-350)",
|
||||||
},
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
contextual: {
|
|
||||||
primary: "ref(globals.colors.white-200)",
|
|
||||||
},
|
|
||||||
neutral: {
|
|
||||||
primary: "ref(globals.colors.gray-550)",
|
|
||||||
secondary: "ref(globals.colors.gray-300)",
|
|
||||||
tertiary: "ref(globals.colors.gray-150)",
|
|
||||||
},
|
|
||||||
info: {
|
|
||||||
primary: "ref(globals.colors.info-550)",
|
|
||||||
secondary: "ref(globals.colors.info-300)",
|
|
||||||
tertiary: "ref(globals.colors.info-150)",
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
primary: "ref(globals.colors.success-550)",
|
|
||||||
secondary: "ref(globals.colors.success-300)",
|
|
||||||
tertiary: "ref(globals.colors.success-150)",
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
primary: "ref(globals.colors.warning-550)",
|
|
||||||
secondary: "ref(globals.colors.warning-300)",
|
|
||||||
tertiary: "ref(globals.colors.warning-150)",
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
primary: "ref(globals.colors.error-550)",
|
|
||||||
secondary: "ref(globals.colors.error-300)",
|
|
||||||
tertiary: "ref(globals.colors.error-150)",
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
primary: "ref(globals.colors.gray-100)",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
palette: {
|
red: {
|
||||||
brand: {
|
primary: "ref(globals.colors.red-500)",
|
||||||
primary: "ref(globals.colors.brand-500)",
|
secondary: "ref(globals.colors.red-350)",
|
||||||
secondary: "ref(globals.colors.brand-350)",
|
tertiary: "ref(globals.colors.red-150)",
|
||||||
tertiary: "ref(globals.colors.brand-150)",
|
},
|
||||||
},
|
orange: {
|
||||||
red: {
|
primary: "ref(globals.colors.orange-500)",
|
||||||
primary: "ref(globals.colors.red-500)",
|
secondary: "ref(globals.colors.orange-350)",
|
||||||
secondary: "ref(globals.colors.red-350)",
|
tertiary: "ref(globals.colors.orange-150)",
|
||||||
tertiary: "ref(globals.colors.red-150)",
|
},
|
||||||
},
|
brown: {
|
||||||
orange: {
|
primary: "ref(globals.colors.brown-500)",
|
||||||
primary: "ref(globals.colors.orange-500)",
|
secondary: "ref(globals.colors.brown-350)",
|
||||||
secondary: "ref(globals.colors.orange-350)",
|
tertiary: "ref(globals.colors.brown-150)",
|
||||||
tertiary: "ref(globals.colors.orange-150)",
|
},
|
||||||
},
|
yellow: {
|
||||||
brown: {
|
primary: "ref(globals.colors.yellow-500)",
|
||||||
primary: "ref(globals.colors.brown-500)",
|
secondary: "ref(globals.colors.yellow-350)",
|
||||||
secondary: "ref(globals.colors.brown-350)",
|
tertiary: "ref(globals.colors.yellow-150)",
|
||||||
tertiary: "ref(globals.colors.brown-150)",
|
},
|
||||||
},
|
green: {
|
||||||
yellow: {
|
primary: "ref(globals.colors.green-500)",
|
||||||
primary: "ref(globals.colors.yellow-500)",
|
secondary: "ref(globals.colors.green-350)",
|
||||||
secondary: "ref(globals.colors.yellow-350)",
|
tertiary: "ref(globals.colors.green-150)",
|
||||||
tertiary: "ref(globals.colors.yellow-150)",
|
},
|
||||||
},
|
"blue-1": {
|
||||||
green: {
|
primary: "ref(globals.colors.blue-1-500)",
|
||||||
primary: "ref(globals.colors.green-500)",
|
secondary: "ref(globals.colors.blue-1-350)",
|
||||||
secondary: "ref(globals.colors.green-350)",
|
tertiary: "ref(globals.colors.blue-1-150)",
|
||||||
tertiary: "ref(globals.colors.green-150)",
|
},
|
||||||
},
|
"blue-2": {
|
||||||
"blue-1": {
|
primary: "ref(globals.colors.blue-2-500)",
|
||||||
primary: "ref(globals.colors.blue-1-500)",
|
secondary: "ref(globals.colors.blue-2-350)",
|
||||||
secondary: "ref(globals.colors.blue-1-350)",
|
tertiary: "ref(globals.colors.blue-2-150)",
|
||||||
tertiary: "ref(globals.colors.blue-1-150)",
|
},
|
||||||
},
|
purple: {
|
||||||
"blue-2": {
|
primary: "ref(globals.colors.purple-500)",
|
||||||
primary: "ref(globals.colors.blue-2-500)",
|
secondary: "ref(globals.colors.purple-350)",
|
||||||
secondary: "ref(globals.colors.blue-2-350)",
|
tertiary: "ref(globals.colors.purple-150)",
|
||||||
tertiary: "ref(globals.colors.blue-2-150)",
|
},
|
||||||
},
|
pink: {
|
||||||
purple: {
|
primary: "ref(globals.colors.pink-500)",
|
||||||
primary: "ref(globals.colors.purple-500)",
|
secondary: "ref(globals.colors.pink-350)",
|
||||||
secondary: "ref(globals.colors.purple-350)",
|
tertiary: "ref(globals.colors.pink-150)",
|
||||||
tertiary: "ref(globals.colors.purple-150)",
|
},
|
||||||
},
|
gray: {
|
||||||
pink: {
|
primary: "ref(globals.colors.gray-500)",
|
||||||
primary: "ref(globals.colors.pink-500)",
|
secondary: "ref(globals.colors.gray-350)",
|
||||||
secondary: "ref(globals.colors.pink-350)",
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
tertiary: "ref(globals.colors.pink-150)",
|
},
|
||||||
},
|
},
|
||||||
gray: {
|
text: {
|
||||||
primary: "ref(globals.colors.gray-500)",
|
primary: "ref(globals.colors.black-050)",
|
||||||
secondary: "ref(globals.colors.gray-350)",
|
},
|
||||||
tertiary: "ref(globals.colors.gray-150)",
|
},
|
||||||
},
|
content: {
|
||||||
|
logo1: "ref(globals.colors.logo-1)",
|
||||||
|
logo2: "ref(globals.colors.logo-2)",
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-700)",
|
||||||
|
secondary: "ref(globals.colors.brand-600)",
|
||||||
|
tertiary: "ref(globals.colors.brand-500)",
|
||||||
|
"on-brand": "ref(globals.colors.brand-050)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-850)",
|
||||||
|
secondary: "ref(globals.colors.gray-600)",
|
||||||
|
tertiary: "ref(globals.colors.gray-500)",
|
||||||
|
"on-neutral": "ref(globals.colors.gray-050)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.white-950)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-700)",
|
||||||
|
secondary: "ref(globals.colors.info-600)",
|
||||||
|
tertiary: "ref(globals.colors.info-500)",
|
||||||
|
"on-info": "ref(globals.colors.info-050)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-700)",
|
||||||
|
secondary: "ref(globals.colors.success-600)",
|
||||||
|
tertiary: "ref(globals.colors.success-500)",
|
||||||
|
"on-success": "ref(globals.colors.success-050)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-700)",
|
||||||
|
secondary: "ref(globals.colors.warning-600)",
|
||||||
|
tertiary: "ref(globals.colors.warning-500)",
|
||||||
|
"on-warning": "ref(globals.colors.warning-050)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-700)",
|
||||||
|
secondary: "ref(globals.colors.error-600)",
|
||||||
|
tertiary: "ref(globals.colors.error-500)",
|
||||||
|
"on-error": "ref(globals.colors.error-050)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-300)",
|
||||||
|
secondary: "ref(globals.colors.white-500)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-500)",
|
||||||
|
secondary: "ref(globals.colors.brand-350)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-500)",
|
||||||
|
secondary: "ref(globals.colors.red-350)",
|
||||||
|
tertiary: "ref(globals.colors.red-150)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-500)",
|
||||||
|
secondary: "ref(globals.colors.orange-350)",
|
||||||
|
tertiary: "ref(globals.colors.orange-150)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-500)",
|
||||||
|
secondary: "ref(globals.colors.brown-350)",
|
||||||
|
tertiary: "ref(globals.colors.brown-150)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-500)",
|
||||||
|
secondary: "ref(globals.colors.yellow-350)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-150)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-500)",
|
||||||
|
secondary: "ref(globals.colors.green-350)",
|
||||||
|
tertiary: "ref(globals.colors.green-150)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-150)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-150)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-500)",
|
||||||
|
secondary: "ref(globals.colors.purple-350)",
|
||||||
|
tertiary: "ref(globals.colors.purple-150)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-500)",
|
||||||
|
secondary: "ref(globals.colors.pink-350)",
|
||||||
|
tertiary: "ref(globals.colors.pink-150)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-500)",
|
||||||
|
secondary: "ref(globals.colors.gray-350)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
border: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-100)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-550)",
|
||||||
|
secondary: "ref(globals.colors.brand-300)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.white-200)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-550)",
|
||||||
|
secondary: "ref(globals.colors.gray-300)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-550)",
|
||||||
|
secondary: "ref(globals.colors.info-300)",
|
||||||
|
tertiary: "ref(globals.colors.info-150)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-550)",
|
||||||
|
secondary: "ref(globals.colors.success-300)",
|
||||||
|
tertiary: "ref(globals.colors.success-150)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-550)",
|
||||||
|
secondary: "ref(globals.colors.warning-300)",
|
||||||
|
tertiary: "ref(globals.colors.warning-150)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-550)",
|
||||||
|
secondary: "ref(globals.colors.error-300)",
|
||||||
|
tertiary: "ref(globals.colors.error-150)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-100)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-500)",
|
||||||
|
secondary: "ref(globals.colors.brand-350)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-500)",
|
||||||
|
secondary: "ref(globals.colors.red-350)",
|
||||||
|
tertiary: "ref(globals.colors.red-150)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-500)",
|
||||||
|
secondary: "ref(globals.colors.orange-350)",
|
||||||
|
tertiary: "ref(globals.colors.orange-150)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-500)",
|
||||||
|
secondary: "ref(globals.colors.brown-350)",
|
||||||
|
tertiary: "ref(globals.colors.brown-150)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-500)",
|
||||||
|
secondary: "ref(globals.colors.yellow-350)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-150)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-500)",
|
||||||
|
secondary: "ref(globals.colors.green-350)",
|
||||||
|
tertiary: "ref(globals.colors.green-150)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-150)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-150)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-500)",
|
||||||
|
secondary: "ref(globals.colors.purple-350)",
|
||||||
|
tertiary: "ref(globals.colors.purple-150)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-500)",
|
||||||
|
secondary: "ref(globals.colors.pink-350)",
|
||||||
|
tertiary: "ref(globals.colors.pink-150)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-500)",
|
||||||
|
secondary: "ref(globals.colors.gray-350)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const defaultTheme = {
|
||||||
|
globals,
|
||||||
|
contextuals: contextuaDefault,
|
||||||
components: {},
|
components: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const contextualDarkTokens = {
|
||||||
|
background: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-800)",
|
||||||
|
secondary: "ref(globals.colors.gray-850)",
|
||||||
|
tertiary: "ref(globals.colors.gray-900)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.brand-650)",
|
||||||
|
secondary: "ref(globals.colors.brand-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.brand-750)",
|
||||||
|
tertiary: "ref(globals.colors.brand-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.brand-800)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.gray-650)",
|
||||||
|
secondary: "ref(globals.colors.gray-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.gray-750)",
|
||||||
|
tertiary: "ref(globals.colors.gray-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.gray-800)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.white-050)",
|
||||||
|
"primary-hover": "ref(globals.colors.white-100)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.info-650)",
|
||||||
|
secondary: "ref(globals.colors.info-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.info-750)",
|
||||||
|
tertiary: "ref(globals.colors.info-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.info-800)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.success-650)",
|
||||||
|
secondary: "ref(globals.colors.success-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.success-750)",
|
||||||
|
tertiary: "ref(globals.colors.success-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.success-800)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.warning-650)",
|
||||||
|
secondary: "ref(globals.colors.warning-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.warning-750)",
|
||||||
|
tertiary: "ref(globals.colors.warning-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.warning-800)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.error-650)",
|
||||||
|
secondary: "ref(globals.colors.error-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.error-750)",
|
||||||
|
tertiary: "ref(globals.colors.error-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.error-800)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-750)",
|
||||||
|
secondary: "ref(globals.colors.gray-800)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-350)",
|
||||||
|
secondary: "ref(globals.colors.brand-450)",
|
||||||
|
tertiary: "ref(globals.colors.brand-550)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-350)",
|
||||||
|
secondary: "ref(globals.colors.red-450)",
|
||||||
|
tertiary: "ref(globals.colors.red-550)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-350)",
|
||||||
|
secondary: "ref(globals.colors.orange-450)",
|
||||||
|
tertiary: "ref(globals.colors.orange-550)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-350)",
|
||||||
|
secondary: "ref(globals.colors.brown-450)",
|
||||||
|
tertiary: "ref(globals.colors.brown-550)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-350)",
|
||||||
|
secondary: "ref(globals.colors.yellow-450)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-550)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-350)",
|
||||||
|
secondary: "ref(globals.colors.green-450)",
|
||||||
|
tertiary: "ref(globals.colors.green-550)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-550)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-550)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-350)",
|
||||||
|
secondary: "ref(globals.colors.purple-450)",
|
||||||
|
tertiary: "ref(globals.colors.purple-550)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-350)",
|
||||||
|
secondary: "ref(globals.colors.pink-450)",
|
||||||
|
tertiary: "ref(globals.colors.pink-550)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-350)",
|
||||||
|
secondary: "ref(globals.colors.gray-450)",
|
||||||
|
tertiary: "ref(globals.colors.gray-550)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
logo1: "ref(globals.colors.logo-1-dark)",
|
||||||
|
logo2: "ref(globals.colors.logo-2-dark)",
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-050)",
|
||||||
|
secondary: "ref(globals.colors.brand-100)",
|
||||||
|
tertiary: "ref(globals.colors.brand-250)",
|
||||||
|
"on-brand": "ref(globals.colors.brand-050)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-050)",
|
||||||
|
secondary: "ref(globals.colors.gray-100)",
|
||||||
|
tertiary: "ref(globals.colors.gray-250)",
|
||||||
|
"on-neutral": "ref(globals.colors.gray-050)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.black-850)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-050)",
|
||||||
|
secondary: "ref(globals.colors.info-100)",
|
||||||
|
tertiary: "ref(globals.colors.info-250)",
|
||||||
|
"on-info": "ref(globals.colors.info-050)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-050)",
|
||||||
|
secondary: "ref(globals.colors.success-100)",
|
||||||
|
tertiary: "ref(globals.colors.success-250)",
|
||||||
|
"on-success": "ref(globals.colors.success-050)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-050)",
|
||||||
|
secondary: "ref(globals.colors.warning-100)",
|
||||||
|
tertiary: "ref(globals.colors.warning-250)",
|
||||||
|
"on-warning": "ref(globals.colors.warning-050)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-050)",
|
||||||
|
secondary: "ref(globals.colors.error-100)",
|
||||||
|
tertiary: "ref(globals.colors.error-250)",
|
||||||
|
"on-error": "ref(globals.colors.error-050)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-600)",
|
||||||
|
secondary: "ref(globals.colors.black-300)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-350)",
|
||||||
|
secondary: "ref(globals.colors.brand-450)",
|
||||||
|
tertiary: "ref(globals.colors.brand-550)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-350)",
|
||||||
|
secondary: "ref(globals.colors.red-450)",
|
||||||
|
tertiary: "ref(globals.colors.red-550)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-350)",
|
||||||
|
secondary: "ref(globals.colors.orange-450)",
|
||||||
|
tertiary: "ref(globals.colors.orange-550)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-350)",
|
||||||
|
secondary: "ref(globals.colors.brown-450)",
|
||||||
|
tertiary: "ref(globals.colors.brown-550)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-350)",
|
||||||
|
secondary: "ref(globals.colors.yellow-450)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-550)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-350)",
|
||||||
|
secondary: "ref(globals.colors.green-450)",
|
||||||
|
tertiary: "ref(globals.colors.green-550)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-550)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-550)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-350)",
|
||||||
|
secondary: "ref(globals.colors.purple-450)",
|
||||||
|
tertiary: "ref(globals.colors.purple-550)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-350)",
|
||||||
|
secondary: "ref(globals.colors.pink-450)",
|
||||||
|
tertiary: "ref(globals.colors.pink-550)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-350)",
|
||||||
|
secondary: "ref(globals.colors.gray-450)",
|
||||||
|
tertiary: "ref(globals.colors.gray-550)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-750)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-450)",
|
||||||
|
secondary: "ref(globals.colors.brand-600)",
|
||||||
|
tertiary: "ref(globals.colors.brand-700)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.black-200)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-450)",
|
||||||
|
secondary: "ref(globals.colors.gray-600)",
|
||||||
|
tertiary: "ref(globals.colors.gray-700)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-450)",
|
||||||
|
secondary: "ref(globals.colors.info-600)",
|
||||||
|
tertiary: "ref(globals.colors.info-700)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-450)",
|
||||||
|
secondary: "ref(globals.colors.success-600)",
|
||||||
|
tertiary: "ref(globals.colors.success-700)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-450)",
|
||||||
|
secondary: "ref(globals.colors.warning-600)",
|
||||||
|
tertiary: "ref(globals.colors.warning-700)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-450)",
|
||||||
|
secondary: "ref(globals.colors.error-600)",
|
||||||
|
tertiary: "ref(globals.colors.error-700)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-800)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-350)",
|
||||||
|
secondary: "ref(globals.colors.brand-450)",
|
||||||
|
tertiary: "ref(globals.colors.brand-550)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-350)",
|
||||||
|
secondary: "ref(globals.colors.red-450)",
|
||||||
|
tertiary: "ref(globals.colors.red-550)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-350)",
|
||||||
|
secondary: "ref(globals.colors.orange-450)",
|
||||||
|
tertiary: "ref(globals.colors.orange-550)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-350)",
|
||||||
|
secondary: "ref(globals.colors.brown-450)",
|
||||||
|
tertiary: "ref(globals.colors.brown-550)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-350)",
|
||||||
|
secondary: "ref(globals.colors.yellow-450)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-550)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-350)",
|
||||||
|
secondary: "ref(globals.colors.green-450)",
|
||||||
|
tertiary: "ref(globals.colors.green-550)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-550)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-550)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-350)",
|
||||||
|
secondary: "ref(globals.colors.purple-450)",
|
||||||
|
tertiary: "ref(globals.colors.purple-550)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-350)",
|
||||||
|
secondary: "ref(globals.colors.pink-450)",
|
||||||
|
tertiary: "ref(globals.colors.pink-550)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-350)",
|
||||||
|
secondary: "ref(globals.colors.gray-450)",
|
||||||
|
tertiary: "ref(globals.colors.gray-550)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
themes: {
|
themes: {
|
||||||
default: defaultTheme,
|
default: defaultTheme,
|
||||||
|
|||||||
@@ -5,6 +5,670 @@ export type DefaultTokens = (typeof tokens)["themes"]["default"];
|
|||||||
|
|
||||||
export const defaultTokens = tokens.themes.default;
|
export const defaultTokens = tokens.themes.default;
|
||||||
export const defaultThemes = tokens.themes;
|
export const defaultThemes = tokens.themes;
|
||||||
|
export const contextuaDefault = {
|
||||||
|
background: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-000)",
|
||||||
|
secondary: "ref(globals.colors.gray-000)",
|
||||||
|
tertiary: "ref(globals.colors.gray-025)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.brand-650)",
|
||||||
|
secondary: "ref(globals.colors.brand-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.brand-150)",
|
||||||
|
tertiary: "ref(globals.colors.brand-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.brand-100)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.gray-650)",
|
||||||
|
secondary: "ref(globals.colors.gray-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.gray-150)",
|
||||||
|
tertiary: "ref(globals.colors.gray-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.gray-100)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.black-050)",
|
||||||
|
"primary-hover": "ref(globals.colors.black-100)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.info-650)",
|
||||||
|
secondary: "ref(globals.colors.info-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.info-150)",
|
||||||
|
tertiary: "ref(globals.colors.info-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.info-100)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.success-650)",
|
||||||
|
secondary: "ref(globals.colors.success-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.success-150)",
|
||||||
|
tertiary: "ref(globals.colors.success-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.success-100)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.warning-650)",
|
||||||
|
secondary: "ref(globals.colors.warning-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.warning-150)",
|
||||||
|
tertiary: "ref(globals.colors.warning-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.warning-100)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.error-650)",
|
||||||
|
secondary: "ref(globals.colors.error-100)",
|
||||||
|
"secondary-hover": "ref(globals.colors.error-150)",
|
||||||
|
tertiary: "ref(globals.colors.error-050)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.error-100)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-100)",
|
||||||
|
secondary: "ref(globals.colors.gray-050)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-500)",
|
||||||
|
secondary: "ref(globals.colors.brand-350)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-500)",
|
||||||
|
secondary: "ref(globals.colors.red-350)",
|
||||||
|
tertiary: "ref(globals.colors.red-150)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-500)",
|
||||||
|
secondary: "ref(globals.colors.orange-350)",
|
||||||
|
tertiary: "ref(globals.colors.orange-150)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-500)",
|
||||||
|
secondary: "ref(globals.colors.brown-350)",
|
||||||
|
tertiary: "ref(globals.colors.brown-150)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-500)",
|
||||||
|
secondary: "ref(globals.colors.yellow-350)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-150)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-500)",
|
||||||
|
secondary: "ref(globals.colors.green-350)",
|
||||||
|
tertiary: "ref(globals.colors.green-150)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-150)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-150)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-500)",
|
||||||
|
secondary: "ref(globals.colors.purple-350)",
|
||||||
|
tertiary: "ref(globals.colors.purple-150)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-500)",
|
||||||
|
secondary: "ref(globals.colors.pink-350)",
|
||||||
|
tertiary: "ref(globals.colors.pink-150)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-500)",
|
||||||
|
secondary: "ref(globals.colors.gray-350)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
primary: "ref(globals.colors.black-050)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
logo1: "ref(globals.colors.logo-1)",
|
||||||
|
logo2: "ref(globals.colors.logo-2)",
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-700)",
|
||||||
|
secondary: "ref(globals.colors.brand-600)",
|
||||||
|
tertiary: "ref(globals.colors.brand-500)",
|
||||||
|
"on-brand": "ref(globals.colors.brand-050)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-850)",
|
||||||
|
secondary: "ref(globals.colors.gray-600)",
|
||||||
|
tertiary: "ref(globals.colors.gray-500)",
|
||||||
|
"on-neutral": "ref(globals.colors.gray-050)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.white-950)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-700)",
|
||||||
|
secondary: "ref(globals.colors.info-600)",
|
||||||
|
tertiary: "ref(globals.colors.info-500)",
|
||||||
|
"on-info": "ref(globals.colors.info-050)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-700)",
|
||||||
|
secondary: "ref(globals.colors.success-600)",
|
||||||
|
tertiary: "ref(globals.colors.success-500)",
|
||||||
|
"on-success": "ref(globals.colors.success-050)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-700)",
|
||||||
|
secondary: "ref(globals.colors.warning-600)",
|
||||||
|
tertiary: "ref(globals.colors.warning-500)",
|
||||||
|
"on-warning": "ref(globals.colors.warning-050)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-700)",
|
||||||
|
secondary: "ref(globals.colors.error-600)",
|
||||||
|
tertiary: "ref(globals.colors.error-500)",
|
||||||
|
"on-error": "ref(globals.colors.error-050)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-300)",
|
||||||
|
secondary: "ref(globals.colors.white-500)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-500)",
|
||||||
|
secondary: "ref(globals.colors.brand-350)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-500)",
|
||||||
|
secondary: "ref(globals.colors.red-350)",
|
||||||
|
tertiary: "ref(globals.colors.red-150)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-500)",
|
||||||
|
secondary: "ref(globals.colors.orange-350)",
|
||||||
|
tertiary: "ref(globals.colors.orange-150)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-500)",
|
||||||
|
secondary: "ref(globals.colors.brown-350)",
|
||||||
|
tertiary: "ref(globals.colors.brown-150)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-500)",
|
||||||
|
secondary: "ref(globals.colors.yellow-350)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-150)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-500)",
|
||||||
|
secondary: "ref(globals.colors.green-350)",
|
||||||
|
tertiary: "ref(globals.colors.green-150)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-150)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-150)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-500)",
|
||||||
|
secondary: "ref(globals.colors.purple-350)",
|
||||||
|
tertiary: "ref(globals.colors.purple-150)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-500)",
|
||||||
|
secondary: "ref(globals.colors.pink-350)",
|
||||||
|
tertiary: "ref(globals.colors.pink-150)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-500)",
|
||||||
|
secondary: "ref(globals.colors.gray-350)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-100)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-550)",
|
||||||
|
secondary: "ref(globals.colors.brand-300)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.white-200)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-550)",
|
||||||
|
secondary: "ref(globals.colors.gray-300)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-550)",
|
||||||
|
secondary: "ref(globals.colors.info-300)",
|
||||||
|
tertiary: "ref(globals.colors.info-150)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-550)",
|
||||||
|
secondary: "ref(globals.colors.success-300)",
|
||||||
|
tertiary: "ref(globals.colors.success-150)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-550)",
|
||||||
|
secondary: "ref(globals.colors.warning-300)",
|
||||||
|
tertiary: "ref(globals.colors.warning-150)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-550)",
|
||||||
|
secondary: "ref(globals.colors.error-300)",
|
||||||
|
tertiary: "ref(globals.colors.error-150)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-100)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-500)",
|
||||||
|
secondary: "ref(globals.colors.brand-350)",
|
||||||
|
tertiary: "ref(globals.colors.brand-150)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-500)",
|
||||||
|
secondary: "ref(globals.colors.red-350)",
|
||||||
|
tertiary: "ref(globals.colors.red-150)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-500)",
|
||||||
|
secondary: "ref(globals.colors.orange-350)",
|
||||||
|
tertiary: "ref(globals.colors.orange-150)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-500)",
|
||||||
|
secondary: "ref(globals.colors.brown-350)",
|
||||||
|
tertiary: "ref(globals.colors.brown-150)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-500)",
|
||||||
|
secondary: "ref(globals.colors.yellow-350)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-150)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-500)",
|
||||||
|
secondary: "ref(globals.colors.green-350)",
|
||||||
|
tertiary: "ref(globals.colors.green-150)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-150)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-500)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-350)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-150)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-500)",
|
||||||
|
secondary: "ref(globals.colors.purple-350)",
|
||||||
|
tertiary: "ref(globals.colors.purple-150)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-500)",
|
||||||
|
secondary: "ref(globals.colors.pink-350)",
|
||||||
|
tertiary: "ref(globals.colors.pink-150)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-500)",
|
||||||
|
secondary: "ref(globals.colors.gray-350)",
|
||||||
|
tertiary: "ref(globals.colors.gray-150)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const contextualDark = {
|
||||||
|
background: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-800)",
|
||||||
|
secondary: "ref(globals.colors.gray-850)",
|
||||||
|
tertiary: "ref(globals.colors.gray-900)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.brand-650)",
|
||||||
|
secondary: "ref(globals.colors.brand-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.brand-750)",
|
||||||
|
tertiary: "ref(globals.colors.brand-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.brand-800)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.gray-650)",
|
||||||
|
secondary: "ref(globals.colors.gray-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.gray-750)",
|
||||||
|
tertiary: "ref(globals.colors.gray-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.gray-800)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.white-050)",
|
||||||
|
"primary-hover": "ref(globals.colors.white-100)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.info-650)",
|
||||||
|
secondary: "ref(globals.colors.info-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.info-750)",
|
||||||
|
tertiary: "ref(globals.colors.info-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.info-800)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.success-650)",
|
||||||
|
secondary: "ref(globals.colors.success-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.success-750)",
|
||||||
|
tertiary: "ref(globals.colors.success-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.success-800)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.warning-650)",
|
||||||
|
secondary: "ref(globals.colors.warning-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.warning-750)",
|
||||||
|
tertiary: "ref(globals.colors.warning-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.warning-800)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-550)",
|
||||||
|
"primary-hover": "ref(globals.colors.error-650)",
|
||||||
|
secondary: "ref(globals.colors.error-700)",
|
||||||
|
"secondary-hover": "ref(globals.colors.error-750)",
|
||||||
|
tertiary: "ref(globals.colors.error-750)",
|
||||||
|
"tertiary-hover": "ref(globals.colors.error-800)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-750)",
|
||||||
|
secondary: "ref(globals.colors.gray-800)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-350)",
|
||||||
|
secondary: "ref(globals.colors.brand-450)",
|
||||||
|
tertiary: "ref(globals.colors.brand-550)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-350)",
|
||||||
|
secondary: "ref(globals.colors.red-450)",
|
||||||
|
tertiary: "ref(globals.colors.red-550)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-350)",
|
||||||
|
secondary: "ref(globals.colors.orange-450)",
|
||||||
|
tertiary: "ref(globals.colors.orange-550)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-350)",
|
||||||
|
secondary: "ref(globals.colors.brown-450)",
|
||||||
|
tertiary: "ref(globals.colors.brown-550)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-350)",
|
||||||
|
secondary: "ref(globals.colors.yellow-450)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-550)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-350)",
|
||||||
|
secondary: "ref(globals.colors.green-450)",
|
||||||
|
tertiary: "ref(globals.colors.green-550)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-550)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-550)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-350)",
|
||||||
|
secondary: "ref(globals.colors.purple-450)",
|
||||||
|
tertiary: "ref(globals.colors.purple-550)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-350)",
|
||||||
|
secondary: "ref(globals.colors.pink-450)",
|
||||||
|
tertiary: "ref(globals.colors.pink-550)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-350)",
|
||||||
|
secondary: "ref(globals.colors.gray-450)",
|
||||||
|
tertiary: "ref(globals.colors.gray-550)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
logo1: "ref(globals.colors.logo-1-dark)",
|
||||||
|
logo2: "ref(globals.colors.logo-2-dark)",
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-050)",
|
||||||
|
secondary: "ref(globals.colors.brand-100)",
|
||||||
|
tertiary: "ref(globals.colors.brand-250)",
|
||||||
|
"on-brand": "ref(globals.colors.brand-050)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-050)",
|
||||||
|
secondary: "ref(globals.colors.gray-100)",
|
||||||
|
tertiary: "ref(globals.colors.gray-250)",
|
||||||
|
"on-neutral": "ref(globals.colors.gray-050)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.black-850)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-050)",
|
||||||
|
secondary: "ref(globals.colors.info-100)",
|
||||||
|
tertiary: "ref(globals.colors.info-250)",
|
||||||
|
"on-info": "ref(globals.colors.info-050)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-050)",
|
||||||
|
secondary: "ref(globals.colors.success-100)",
|
||||||
|
tertiary: "ref(globals.colors.success-250)",
|
||||||
|
"on-success": "ref(globals.colors.success-050)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-050)",
|
||||||
|
secondary: "ref(globals.colors.warning-100)",
|
||||||
|
tertiary: "ref(globals.colors.warning-250)",
|
||||||
|
"on-warning": "ref(globals.colors.warning-050)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-050)",
|
||||||
|
secondary: "ref(globals.colors.error-100)",
|
||||||
|
tertiary: "ref(globals.colors.error-250)",
|
||||||
|
"on-error": "ref(globals.colors.error-050)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-600)",
|
||||||
|
secondary: "ref(globals.colors.black-300)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-350)",
|
||||||
|
secondary: "ref(globals.colors.brand-450)",
|
||||||
|
tertiary: "ref(globals.colors.brand-550)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-350)",
|
||||||
|
secondary: "ref(globals.colors.red-450)",
|
||||||
|
tertiary: "ref(globals.colors.red-550)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-350)",
|
||||||
|
secondary: "ref(globals.colors.orange-450)",
|
||||||
|
tertiary: "ref(globals.colors.orange-550)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-350)",
|
||||||
|
secondary: "ref(globals.colors.brown-450)",
|
||||||
|
tertiary: "ref(globals.colors.brown-550)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-350)",
|
||||||
|
secondary: "ref(globals.colors.yellow-450)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-550)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-350)",
|
||||||
|
secondary: "ref(globals.colors.green-450)",
|
||||||
|
tertiary: "ref(globals.colors.green-550)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-550)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-550)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-350)",
|
||||||
|
secondary: "ref(globals.colors.purple-450)",
|
||||||
|
tertiary: "ref(globals.colors.purple-550)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-350)",
|
||||||
|
secondary: "ref(globals.colors.pink-450)",
|
||||||
|
tertiary: "ref(globals.colors.pink-550)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-350)",
|
||||||
|
secondary: "ref(globals.colors.gray-450)",
|
||||||
|
tertiary: "ref(globals.colors.gray-550)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
surface: {
|
||||||
|
primary: "ref(globals.colors.gray-750)",
|
||||||
|
},
|
||||||
|
semantic: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-450)",
|
||||||
|
secondary: "ref(globals.colors.brand-600)",
|
||||||
|
tertiary: "ref(globals.colors.brand-700)",
|
||||||
|
},
|
||||||
|
contextual: {
|
||||||
|
primary: "ref(globals.colors.black-200)",
|
||||||
|
},
|
||||||
|
neutral: {
|
||||||
|
primary: "ref(globals.colors.gray-450)",
|
||||||
|
secondary: "ref(globals.colors.gray-600)",
|
||||||
|
tertiary: "ref(globals.colors.gray-700)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
primary: "ref(globals.colors.info-450)",
|
||||||
|
secondary: "ref(globals.colors.info-600)",
|
||||||
|
tertiary: "ref(globals.colors.info-700)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
primary: "ref(globals.colors.success-450)",
|
||||||
|
secondary: "ref(globals.colors.success-600)",
|
||||||
|
tertiary: "ref(globals.colors.success-700)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
primary: "ref(globals.colors.warning-450)",
|
||||||
|
secondary: "ref(globals.colors.warning-600)",
|
||||||
|
tertiary: "ref(globals.colors.warning-700)",
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
primary: "ref(globals.colors.error-450)",
|
||||||
|
secondary: "ref(globals.colors.error-600)",
|
||||||
|
tertiary: "ref(globals.colors.error-700)",
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
primary: "ref(globals.colors.gray-800)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
palette: {
|
||||||
|
brand: {
|
||||||
|
primary: "ref(globals.colors.brand-350)",
|
||||||
|
secondary: "ref(globals.colors.brand-450)",
|
||||||
|
tertiary: "ref(globals.colors.brand-550)",
|
||||||
|
},
|
||||||
|
red: {
|
||||||
|
primary: "ref(globals.colors.red-350)",
|
||||||
|
secondary: "ref(globals.colors.red-450)",
|
||||||
|
tertiary: "ref(globals.colors.red-550)",
|
||||||
|
},
|
||||||
|
orange: {
|
||||||
|
primary: "ref(globals.colors.orange-350)",
|
||||||
|
secondary: "ref(globals.colors.orange-450)",
|
||||||
|
tertiary: "ref(globals.colors.orange-550)",
|
||||||
|
},
|
||||||
|
brown: {
|
||||||
|
primary: "ref(globals.colors.brown-350)",
|
||||||
|
secondary: "ref(globals.colors.brown-450)",
|
||||||
|
tertiary: "ref(globals.colors.brown-550)",
|
||||||
|
},
|
||||||
|
yellow: {
|
||||||
|
primary: "ref(globals.colors.yellow-350)",
|
||||||
|
secondary: "ref(globals.colors.yellow-450)",
|
||||||
|
tertiary: "ref(globals.colors.yellow-550)",
|
||||||
|
},
|
||||||
|
green: {
|
||||||
|
primary: "ref(globals.colors.green-350)",
|
||||||
|
secondary: "ref(globals.colors.green-450)",
|
||||||
|
tertiary: "ref(globals.colors.green-550)",
|
||||||
|
},
|
||||||
|
"blue-1": {
|
||||||
|
primary: "ref(globals.colors.blue-1-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-1-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-1-550)",
|
||||||
|
},
|
||||||
|
"blue-2": {
|
||||||
|
primary: "ref(globals.colors.blue-2-350)",
|
||||||
|
secondary: "ref(globals.colors.blue-2-450)",
|
||||||
|
tertiary: "ref(globals.colors.blue-2-550)",
|
||||||
|
},
|
||||||
|
purple: {
|
||||||
|
primary: "ref(globals.colors.purple-350)",
|
||||||
|
secondary: "ref(globals.colors.purple-450)",
|
||||||
|
tertiary: "ref(globals.colors.purple-550)",
|
||||||
|
},
|
||||||
|
pink: {
|
||||||
|
primary: "ref(globals.colors.pink-350)",
|
||||||
|
secondary: "ref(globals.colors.pink-450)",
|
||||||
|
tertiary: "ref(globals.colors.pink-550)",
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
primary: "ref(globals.colors.gray-350)",
|
||||||
|
secondary: "ref(globals.colors.gray-450)",
|
||||||
|
tertiary: "ref(globals.colors.gray-550)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Transform such object:
|
* Transform such object:
|
||||||
|
|||||||
Reference in New Issue
Block a user