🐛(tokens) fix token issue
Fix differences between Figma variables and existing tokens. Warned by color constrast a11y check that failed.
This commit is contained in:
jbpenrath
committed by
Jean-Baptiste PENRATH
Jean-Baptiste PENRATH
parent
a6681d19ed
commit
992061fc8e
@@ -346,6 +346,8 @@ const spacings = {
|
||||
t: "0.5rem",
|
||||
st: "0.25rem",
|
||||
"4xs": "0.125rem",
|
||||
"3xs": "0.25rem",
|
||||
"2xs": "0.375rem",
|
||||
xxxs: "0.25rem",
|
||||
xxs: "0.375rem",
|
||||
xs: "0.5rem",
|
||||
@@ -356,6 +358,8 @@ const spacings = {
|
||||
xl: "2.5rem",
|
||||
xxl: "3rem",
|
||||
xxxl: "3.5rem",
|
||||
"2xl": "3rem",
|
||||
"3xl": "3.5rem",
|
||||
"4xl": "4rem",
|
||||
"5xl": "4.5rem",
|
||||
"6xl": "6rem",
|
||||
@@ -429,6 +433,14 @@ export const contextuaDefault = {
|
||||
tertiary: "ref(globals.colors.gray-025)",
|
||||
},
|
||||
semantic: {
|
||||
overlay: {
|
||||
primary: "ref(globals.colors.black-050)",
|
||||
"primary-hover": "ref(globals.colors.black-100)",
|
||||
},
|
||||
contextual: {
|
||||
primary: "ref(globals.colors.black-050)",
|
||||
"primary-hover": "ref(globals.colors.black-100)",
|
||||
},
|
||||
brand: {
|
||||
primary: "ref(globals.colors.brand-550)",
|
||||
"primary-hover": "ref(globals.colors.brand-650)",
|
||||
@@ -445,10 +457,6 @@ export const contextuaDefault = {
|
||||
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)",
|
||||
@@ -551,43 +559,46 @@ export const contextuaDefault = {
|
||||
logo1: "ref(globals.colors.logo-1)",
|
||||
logo2: "ref(globals.colors.logo-2)",
|
||||
semantic: {
|
||||
contextual: {
|
||||
primary: "ref(globals.colors.white-950)",
|
||||
},
|
||||
overlay: {
|
||||
primary: "ref(globals.colors.white-950)",
|
||||
},
|
||||
brand: {
|
||||
primary: "ref(globals.colors.brand-700)",
|
||||
secondary: "ref(globals.colors.brand-600)",
|
||||
tertiary: "ref(globals.colors.brand-500)",
|
||||
tertiary: "ref(globals.colors.brand-550)",
|
||||
"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)",
|
||||
tertiary: "ref(globals.colors.gray-550)",
|
||||
"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)",
|
||||
tertiary: "ref(globals.colors.info-550)",
|
||||
"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)",
|
||||
tertiary: "ref(globals.colors.success-550)",
|
||||
"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)",
|
||||
tertiary: "ref(globals.colors.warning-550)",
|
||||
"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)",
|
||||
tertiary: "ref(globals.colors.error-550)",
|
||||
"on-error": "ref(globals.colors.error-050)",
|
||||
},
|
||||
disabled: {
|
||||
@@ -598,58 +609,36 @@ export const contextuaDefault = {
|
||||
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)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -658,14 +647,17 @@ export const contextuaDefault = {
|
||||
primary: "ref(globals.colors.gray-100)",
|
||||
},
|
||||
semantic: {
|
||||
contextual: {
|
||||
primary: "ref(globals.colors.white-200)",
|
||||
},
|
||||
overlay: {
|
||||
primary: "ref(globals.colors.white-200)",
|
||||
},
|
||||
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)",
|
||||
@@ -695,63 +687,6 @@ export const contextuaDefault = {
|
||||
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 = {
|
||||
@@ -768,6 +703,14 @@ export const contextualDarkTokens = {
|
||||
tertiary: "ref(globals.colors.gray-900)",
|
||||
},
|
||||
semantic: {
|
||||
contextual: {
|
||||
primary: "ref(globals.colors.white-050)",
|
||||
"primary-hover": "ref(globals.colors.white-100)",
|
||||
},
|
||||
overlay: {
|
||||
primary: "ref(globals.colors.white-050)",
|
||||
"primary-hover": "ref(globals.colors.white-100)",
|
||||
},
|
||||
brand: {
|
||||
primary: "ref(globals.colors.brand-550)",
|
||||
"primary-hover": "ref(globals.colors.brand-650)",
|
||||
@@ -784,10 +727,6 @@ export const contextualDarkTokens = {
|
||||
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)",
|
||||
@@ -887,6 +826,12 @@ export const contextualDarkTokens = {
|
||||
logo1: "ref(globals.colors.logo-1-dark)",
|
||||
logo2: "ref(globals.colors.logo-2-dark)",
|
||||
semantic: {
|
||||
contextual: {
|
||||
primary: "ref(globals.colors.black-850)",
|
||||
},
|
||||
overlay: {
|
||||
primary: "ref(globals.colors.black-850)",
|
||||
},
|
||||
brand: {
|
||||
primary: "ref(globals.colors.brand-050)",
|
||||
secondary: "ref(globals.colors.brand-100)",
|
||||
@@ -899,9 +844,6 @@ export const contextualDarkTokens = {
|
||||
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)",
|
||||
@@ -933,59 +875,37 @@ export const contextualDarkTokens = {
|
||||
},
|
||||
palette: {
|
||||
brand: {
|
||||
primary: "ref(globals.colors.brand-350)",
|
||||
secondary: "ref(globals.colors.brand-450)",
|
||||
tertiary: "ref(globals.colors.brand-550)",
|
||||
primary: "ref(globals.colors.brand-500)",
|
||||
},
|
||||
red: {
|
||||
primary: "ref(globals.colors.red-350)",
|
||||
secondary: "ref(globals.colors.red-450)",
|
||||
tertiary: "ref(globals.colors.red-550)",
|
||||
primary: "ref(globals.colors.red-500)",
|
||||
},
|
||||
orange: {
|
||||
primary: "ref(globals.colors.orange-350)",
|
||||
secondary: "ref(globals.colors.orange-450)",
|
||||
tertiary: "ref(globals.colors.orange-550)",
|
||||
primary: "ref(globals.colors.orange-500)",
|
||||
},
|
||||
brown: {
|
||||
primary: "ref(globals.colors.brown-350)",
|
||||
secondary: "ref(globals.colors.brown-450)",
|
||||
tertiary: "ref(globals.colors.brown-550)",
|
||||
primary: "ref(globals.colors.brown-500)",
|
||||
},
|
||||
yellow: {
|
||||
primary: "ref(globals.colors.yellow-350)",
|
||||
secondary: "ref(globals.colors.yellow-450)",
|
||||
tertiary: "ref(globals.colors.yellow-550)",
|
||||
primary: "ref(globals.colors.yellow-500)",
|
||||
},
|
||||
green: {
|
||||
primary: "ref(globals.colors.green-350)",
|
||||
secondary: "ref(globals.colors.green-450)",
|
||||
tertiary: "ref(globals.colors.green-550)",
|
||||
primary: "ref(globals.colors.green-500)",
|
||||
},
|
||||
"blue-1": {
|
||||
primary: "ref(globals.colors.blue-1-350)",
|
||||
secondary: "ref(globals.colors.blue-1-450)",
|
||||
tertiary: "ref(globals.colors.blue-1-550)",
|
||||
primary: "ref(globals.colors.blue-1-500)",
|
||||
},
|
||||
"blue-2": {
|
||||
primary: "ref(globals.colors.blue-2-350)",
|
||||
secondary: "ref(globals.colors.blue-2-450)",
|
||||
tertiary: "ref(globals.colors.blue-2-550)",
|
||||
primary: "ref(globals.colors.blue-2-500)",
|
||||
},
|
||||
purple: {
|
||||
primary: "ref(globals.colors.purple-350)",
|
||||
secondary: "ref(globals.colors.purple-450)",
|
||||
tertiary: "ref(globals.colors.purple-550)",
|
||||
primary: "ref(globals.colors.purple-500)",
|
||||
},
|
||||
pink: {
|
||||
primary: "ref(globals.colors.pink-350)",
|
||||
secondary: "ref(globals.colors.pink-450)",
|
||||
tertiary: "ref(globals.colors.pink-550)",
|
||||
primary: "ref(globals.colors.pink-500)",
|
||||
},
|
||||
gray: {
|
||||
primary: "ref(globals.colors.gray-350)",
|
||||
secondary: "ref(globals.colors.gray-450)",
|
||||
tertiary: "ref(globals.colors.gray-550)",
|
||||
primary: "ref(globals.colors.gray-500)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -994,14 +914,17 @@ export const contextualDarkTokens = {
|
||||
primary: "ref(globals.colors.gray-750)",
|
||||
},
|
||||
semantic: {
|
||||
contextual: {
|
||||
primary: "ref(globals.colors.black-200)",
|
||||
},
|
||||
overlay: {
|
||||
primary: "ref(globals.colors.black-200)",
|
||||
},
|
||||
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)",
|
||||
@@ -1031,63 +954,6 @@ export const contextualDarkTokens = {
|
||||
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)",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1096,336 +962,8 @@ export default {
|
||||
default: defaultTheme,
|
||||
dark: {
|
||||
globals,
|
||||
contextuals: {
|
||||
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)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
contextuals: contextualDarkTokens,
|
||||
components: {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -535,6 +535,8 @@ describe("Cunningham Bin", () => {
|
||||
--c--globals--spacings--t: 0.5rem;
|
||||
--c--globals--spacings--st: 0.25rem;
|
||||
--c--globals--spacings--4xs: 0.125rem;
|
||||
--c--globals--spacings--3xs: 0.25rem;
|
||||
--c--globals--spacings--2xs: 0.375rem;
|
||||
--c--globals--spacings--xxxs: 0.25rem;
|
||||
--c--globals--spacings--xxs: 0.375rem;
|
||||
--c--globals--spacings--xs: 0.5rem;
|
||||
@@ -545,6 +547,8 @@ describe("Cunningham Bin", () => {
|
||||
--c--globals--spacings--xl: 2.5rem;
|
||||
--c--globals--spacings--xxl: 3rem;
|
||||
--c--globals--spacings--xxxl: 3.5rem;
|
||||
--c--globals--spacings--2xl: 3rem;
|
||||
--c--globals--spacings--3xl: 3.5rem;
|
||||
--c--globals--spacings--4xl: 4rem;
|
||||
--c--globals--spacings--5xl: 4.5rem;
|
||||
--c--globals--spacings--6xl: 6rem;
|
||||
@@ -558,6 +562,10 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000);
|
||||
--c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000);
|
||||
--c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025);
|
||||
--c--contextuals--background--semantic--overlay--primary: var(--c--globals--colors--black-050);
|
||||
--c--contextuals--background--semantic--overlay--primary-hover: var(--c--globals--colors--black-100);
|
||||
--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050);
|
||||
--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100);
|
||||
--c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550);
|
||||
--c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650);
|
||||
--c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-100);
|
||||
@@ -570,8 +578,6 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-150);
|
||||
--c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-050);
|
||||
--c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-100);
|
||||
--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--black-050);
|
||||
--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--black-100);
|
||||
--c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550);
|
||||
--c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650);
|
||||
--c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-100);
|
||||
@@ -634,71 +640,51 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--background--text--primary: var(--c--globals--colors--black-050);
|
||||
--c--contextuals--content--logo1: var(--c--globals--colors--logo-1);
|
||||
--c--contextuals--content--logo2: var(--c--globals--colors--logo-2);
|
||||
--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950);
|
||||
--c--contextuals--content--semantic--overlay--primary: var(--c--globals--colors--white-950);
|
||||
--c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-700);
|
||||
--c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-600);
|
||||
--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-500);
|
||||
--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-550);
|
||||
--c--contextuals--content--semantic--brand--on-brand: var(--c--globals--colors--brand-050);
|
||||
--c--contextuals--content--semantic--neutral--primary: var(--c--globals--colors--gray-850);
|
||||
--c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-600);
|
||||
--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-500);
|
||||
--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-550);
|
||||
--c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050);
|
||||
--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--white-950);
|
||||
--c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-700);
|
||||
--c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-600);
|
||||
--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-500);
|
||||
--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-550);
|
||||
--c--contextuals--content--semantic--info--on-info: var(--c--globals--colors--info-050);
|
||||
--c--contextuals--content--semantic--success--primary: var(--c--globals--colors--success-700);
|
||||
--c--contextuals--content--semantic--success--secondary: var(--c--globals--colors--success-600);
|
||||
--c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-500);
|
||||
--c--contextuals--content--semantic--success--tertiary: var(--c--globals--colors--success-550);
|
||||
--c--contextuals--content--semantic--success--on-success: var(--c--globals--colors--success-050);
|
||||
--c--contextuals--content--semantic--warning--primary: var(--c--globals--colors--warning-700);
|
||||
--c--contextuals--content--semantic--warning--secondary: var(--c--globals--colors--warning-600);
|
||||
--c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-500);
|
||||
--c--contextuals--content--semantic--warning--tertiary: var(--c--globals--colors--warning-550);
|
||||
--c--contextuals--content--semantic--warning--on-warning: var(--c--globals--colors--warning-050);
|
||||
--c--contextuals--content--semantic--error--primary: var(--c--globals--colors--error-700);
|
||||
--c--contextuals--content--semantic--error--secondary: var(--c--globals--colors--error-600);
|
||||
--c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-500);
|
||||
--c--contextuals--content--semantic--error--tertiary: var(--c--globals--colors--error-550);
|
||||
--c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050);
|
||||
--c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-300);
|
||||
--c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--white-500);
|
||||
--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500);
|
||||
--c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-350);
|
||||
--c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-150);
|
||||
--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500);
|
||||
--c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-350);
|
||||
--c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-150);
|
||||
--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500);
|
||||
--c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-350);
|
||||
--c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-150);
|
||||
--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500);
|
||||
--c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-350);
|
||||
--c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-150);
|
||||
--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500);
|
||||
--c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-350);
|
||||
--c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-150);
|
||||
--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500);
|
||||
--c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-350);
|
||||
--c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-150);
|
||||
--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500);
|
||||
--c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350);
|
||||
--c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150);
|
||||
--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500);
|
||||
--c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350);
|
||||
--c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150);
|
||||
--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500);
|
||||
--c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-350);
|
||||
--c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-150);
|
||||
--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500);
|
||||
--c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-350);
|
||||
--c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-150);
|
||||
--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500);
|
||||
--c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-350);
|
||||
--c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-150);
|
||||
--c--contextuals--border--surface--primary: var(--c--globals--colors--gray-100);
|
||||
--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200);
|
||||
--c--contextuals--border--semantic--overlay--primary: var(--c--globals--colors--white-200);
|
||||
--c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-550);
|
||||
--c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-300);
|
||||
--c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-150);
|
||||
--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--white-200);
|
||||
--c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-550);
|
||||
--c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-300);
|
||||
--c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-150);
|
||||
@@ -715,39 +701,6 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-300);
|
||||
--c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-150);
|
||||
--c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-100);
|
||||
--c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-500);
|
||||
--c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-350);
|
||||
--c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-150);
|
||||
--c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-500);
|
||||
--c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-350);
|
||||
--c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-150);
|
||||
--c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-500);
|
||||
--c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-350);
|
||||
--c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-150);
|
||||
--c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-500);
|
||||
--c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-350);
|
||||
--c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-150);
|
||||
--c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-500);
|
||||
--c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-350);
|
||||
--c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-150);
|
||||
--c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-500);
|
||||
--c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-350);
|
||||
--c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-150);
|
||||
--c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-500);
|
||||
--c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-350);
|
||||
--c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-150);
|
||||
--c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-500);
|
||||
--c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-350);
|
||||
--c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-150);
|
||||
--c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-500);
|
||||
--c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-350);
|
||||
--c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-150);
|
||||
--c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-500);
|
||||
--c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-350);
|
||||
--c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-150);
|
||||
--c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-500);
|
||||
--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-350);
|
||||
--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-150);
|
||||
--c--theme--colors--primary: typescript;
|
||||
}
|
||||
.cunningham-theme--dark{
|
||||
@@ -1122,6 +1075,8 @@ describe("Cunningham Bin", () => {
|
||||
--c--globals--spacings--t: 0.5rem;
|
||||
--c--globals--spacings--st: 0.25rem;
|
||||
--c--globals--spacings--4xs: 0.125rem;
|
||||
--c--globals--spacings--3xs: 0.25rem;
|
||||
--c--globals--spacings--2xs: 0.375rem;
|
||||
--c--globals--spacings--xxxs: 0.25rem;
|
||||
--c--globals--spacings--xxs: 0.375rem;
|
||||
--c--globals--spacings--xs: 0.5rem;
|
||||
@@ -1132,6 +1087,8 @@ describe("Cunningham Bin", () => {
|
||||
--c--globals--spacings--xl: 2.5rem;
|
||||
--c--globals--spacings--xxl: 3rem;
|
||||
--c--globals--spacings--xxxl: 3.5rem;
|
||||
--c--globals--spacings--2xl: 3rem;
|
||||
--c--globals--spacings--3xl: 3.5rem;
|
||||
--c--globals--spacings--4xl: 4rem;
|
||||
--c--globals--spacings--5xl: 4.5rem;
|
||||
--c--globals--spacings--6xl: 6rem;
|
||||
@@ -1145,6 +1102,10 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800);
|
||||
--c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850);
|
||||
--c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900);
|
||||
--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050);
|
||||
--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100);
|
||||
--c--contextuals--background--semantic--overlay--primary: var(--c--globals--colors--white-050);
|
||||
--c--contextuals--background--semantic--overlay--primary-hover: var(--c--globals--colors--white-100);
|
||||
--c--contextuals--background--semantic--brand--primary: var(--c--globals--colors--brand-550);
|
||||
--c--contextuals--background--semantic--brand--primary-hover: var(--c--globals--colors--brand-650);
|
||||
--c--contextuals--background--semantic--brand--secondary: var(--c--globals--colors--brand-700);
|
||||
@@ -1157,8 +1118,6 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--background--semantic--neutral--secondary-hover: var(--c--globals--colors--gray-750);
|
||||
--c--contextuals--background--semantic--neutral--tertiary: var(--c--globals--colors--gray-750);
|
||||
--c--contextuals--background--semantic--neutral--tertiary-hover: var(--c--globals--colors--gray-800);
|
||||
--c--contextuals--background--semantic--contextual--primary: var(--c--globals--colors--white-050);
|
||||
--c--contextuals--background--semantic--contextual--primary-hover: var(--c--globals--colors--white-100);
|
||||
--c--contextuals--background--semantic--info--primary: var(--c--globals--colors--info-550);
|
||||
--c--contextuals--background--semantic--info--primary-hover: var(--c--globals--colors--info-650);
|
||||
--c--contextuals--background--semantic--info--secondary: var(--c--globals--colors--info-700);
|
||||
@@ -1220,6 +1179,8 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--background--palette--gray--tertiary: var(--c--globals--colors--gray-550);
|
||||
--c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark);
|
||||
--c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark);
|
||||
--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850);
|
||||
--c--contextuals--content--semantic--overlay--primary: var(--c--globals--colors--black-850);
|
||||
--c--contextuals--content--semantic--brand--primary: var(--c--globals--colors--brand-050);
|
||||
--c--contextuals--content--semantic--brand--secondary: var(--c--globals--colors--brand-100);
|
||||
--c--contextuals--content--semantic--brand--tertiary: var(--c--globals--colors--brand-250);
|
||||
@@ -1228,7 +1189,6 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--content--semantic--neutral--secondary: var(--c--globals--colors--gray-100);
|
||||
--c--contextuals--content--semantic--neutral--tertiary: var(--c--globals--colors--gray-250);
|
||||
--c--contextuals--content--semantic--neutral--on-neutral: var(--c--globals--colors--gray-050);
|
||||
--c--contextuals--content--semantic--contextual--primary: var(--c--globals--colors--black-850);
|
||||
--c--contextuals--content--semantic--info--primary: var(--c--globals--colors--info-050);
|
||||
--c--contextuals--content--semantic--info--secondary: var(--c--globals--colors--info-100);
|
||||
--c--contextuals--content--semantic--info--tertiary: var(--c--globals--colors--info-250);
|
||||
@@ -1247,44 +1207,23 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--content--semantic--error--on-error: var(--c--globals--colors--error-050);
|
||||
--c--contextuals--content--semantic--disabled--primary: var(--c--globals--colors--gray-600);
|
||||
--c--contextuals--content--semantic--disabled--secondary: var(--c--globals--colors--black-300);
|
||||
--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-350);
|
||||
--c--contextuals--content--palette--brand--secondary: var(--c--globals--colors--brand-450);
|
||||
--c--contextuals--content--palette--brand--tertiary: var(--c--globals--colors--brand-550);
|
||||
--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-350);
|
||||
--c--contextuals--content--palette--red--secondary: var(--c--globals--colors--red-450);
|
||||
--c--contextuals--content--palette--red--tertiary: var(--c--globals--colors--red-550);
|
||||
--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-350);
|
||||
--c--contextuals--content--palette--orange--secondary: var(--c--globals--colors--orange-450);
|
||||
--c--contextuals--content--palette--orange--tertiary: var(--c--globals--colors--orange-550);
|
||||
--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-350);
|
||||
--c--contextuals--content--palette--brown--secondary: var(--c--globals--colors--brown-450);
|
||||
--c--contextuals--content--palette--brown--tertiary: var(--c--globals--colors--brown-550);
|
||||
--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-350);
|
||||
--c--contextuals--content--palette--yellow--secondary: var(--c--globals--colors--yellow-450);
|
||||
--c--contextuals--content--palette--yellow--tertiary: var(--c--globals--colors--yellow-550);
|
||||
--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-350);
|
||||
--c--contextuals--content--palette--green--secondary: var(--c--globals--colors--green-450);
|
||||
--c--contextuals--content--palette--green--tertiary: var(--c--globals--colors--green-550);
|
||||
--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-350);
|
||||
--c--contextuals--content--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450);
|
||||
--c--contextuals--content--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550);
|
||||
--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-350);
|
||||
--c--contextuals--content--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450);
|
||||
--c--contextuals--content--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550);
|
||||
--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-350);
|
||||
--c--contextuals--content--palette--purple--secondary: var(--c--globals--colors--purple-450);
|
||||
--c--contextuals--content--palette--purple--tertiary: var(--c--globals--colors--purple-550);
|
||||
--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-350);
|
||||
--c--contextuals--content--palette--pink--secondary: var(--c--globals--colors--pink-450);
|
||||
--c--contextuals--content--palette--pink--tertiary: var(--c--globals--colors--pink-550);
|
||||
--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-350);
|
||||
--c--contextuals--content--palette--gray--secondary: var(--c--globals--colors--gray-450);
|
||||
--c--contextuals--content--palette--gray--tertiary: var(--c--globals--colors--gray-550);
|
||||
--c--contextuals--content--palette--brand--primary: var(--c--globals--colors--brand-500);
|
||||
--c--contextuals--content--palette--red--primary: var(--c--globals--colors--red-500);
|
||||
--c--contextuals--content--palette--orange--primary: var(--c--globals--colors--orange-500);
|
||||
--c--contextuals--content--palette--brown--primary: var(--c--globals--colors--brown-500);
|
||||
--c--contextuals--content--palette--yellow--primary: var(--c--globals--colors--yellow-500);
|
||||
--c--contextuals--content--palette--green--primary: var(--c--globals--colors--green-500);
|
||||
--c--contextuals--content--palette--blue-1--primary: var(--c--globals--colors--blue-1-500);
|
||||
--c--contextuals--content--palette--blue-2--primary: var(--c--globals--colors--blue-2-500);
|
||||
--c--contextuals--content--palette--purple--primary: var(--c--globals--colors--purple-500);
|
||||
--c--contextuals--content--palette--pink--primary: var(--c--globals--colors--pink-500);
|
||||
--c--contextuals--content--palette--gray--primary: var(--c--globals--colors--gray-500);
|
||||
--c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750);
|
||||
--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200);
|
||||
--c--contextuals--border--semantic--overlay--primary: var(--c--globals--colors--black-200);
|
||||
--c--contextuals--border--semantic--brand--primary: var(--c--globals--colors--brand-450);
|
||||
--c--contextuals--border--semantic--brand--secondary: var(--c--globals--colors--brand-600);
|
||||
--c--contextuals--border--semantic--brand--tertiary: var(--c--globals--colors--brand-700);
|
||||
--c--contextuals--border--semantic--contextual--primary: var(--c--globals--colors--black-200);
|
||||
--c--contextuals--border--semantic--neutral--primary: var(--c--globals--colors--gray-450);
|
||||
--c--contextuals--border--semantic--neutral--secondary: var(--c--globals--colors--gray-600);
|
||||
--c--contextuals--border--semantic--neutral--tertiary: var(--c--globals--colors--gray-700);
|
||||
@@ -1301,39 +1240,6 @@ describe("Cunningham Bin", () => {
|
||||
--c--contextuals--border--semantic--error--secondary: var(--c--globals--colors--error-600);
|
||||
--c--contextuals--border--semantic--error--tertiary: var(--c--globals--colors--error-700);
|
||||
--c--contextuals--border--semantic--disabled--primary: var(--c--globals--colors--gray-800);
|
||||
--c--contextuals--border--palette--brand--primary: var(--c--globals--colors--brand-350);
|
||||
--c--contextuals--border--palette--brand--secondary: var(--c--globals--colors--brand-450);
|
||||
--c--contextuals--border--palette--brand--tertiary: var(--c--globals--colors--brand-550);
|
||||
--c--contextuals--border--palette--red--primary: var(--c--globals--colors--red-350);
|
||||
--c--contextuals--border--palette--red--secondary: var(--c--globals--colors--red-450);
|
||||
--c--contextuals--border--palette--red--tertiary: var(--c--globals--colors--red-550);
|
||||
--c--contextuals--border--palette--orange--primary: var(--c--globals--colors--orange-350);
|
||||
--c--contextuals--border--palette--orange--secondary: var(--c--globals--colors--orange-450);
|
||||
--c--contextuals--border--palette--orange--tertiary: var(--c--globals--colors--orange-550);
|
||||
--c--contextuals--border--palette--brown--primary: var(--c--globals--colors--brown-350);
|
||||
--c--contextuals--border--palette--brown--secondary: var(--c--globals--colors--brown-450);
|
||||
--c--contextuals--border--palette--brown--tertiary: var(--c--globals--colors--brown-550);
|
||||
--c--contextuals--border--palette--yellow--primary: var(--c--globals--colors--yellow-350);
|
||||
--c--contextuals--border--palette--yellow--secondary: var(--c--globals--colors--yellow-450);
|
||||
--c--contextuals--border--palette--yellow--tertiary: var(--c--globals--colors--yellow-550);
|
||||
--c--contextuals--border--palette--green--primary: var(--c--globals--colors--green-350);
|
||||
--c--contextuals--border--palette--green--secondary: var(--c--globals--colors--green-450);
|
||||
--c--contextuals--border--palette--green--tertiary: var(--c--globals--colors--green-550);
|
||||
--c--contextuals--border--palette--blue-1--primary: var(--c--globals--colors--blue-1-350);
|
||||
--c--contextuals--border--palette--blue-1--secondary: var(--c--globals--colors--blue-1-450);
|
||||
--c--contextuals--border--palette--blue-1--tertiary: var(--c--globals--colors--blue-1-550);
|
||||
--c--contextuals--border--palette--blue-2--primary: var(--c--globals--colors--blue-2-350);
|
||||
--c--contextuals--border--palette--blue-2--secondary: var(--c--globals--colors--blue-2-450);
|
||||
--c--contextuals--border--palette--blue-2--tertiary: var(--c--globals--colors--blue-2-550);
|
||||
--c--contextuals--border--palette--purple--primary: var(--c--globals--colors--purple-350);
|
||||
--c--contextuals--border--palette--purple--secondary: var(--c--globals--colors--purple-450);
|
||||
--c--contextuals--border--palette--purple--tertiary: var(--c--globals--colors--purple-550);
|
||||
--c--contextuals--border--palette--pink--primary: var(--c--globals--colors--pink-350);
|
||||
--c--contextuals--border--palette--pink--secondary: var(--c--globals--colors--pink-450);
|
||||
--c--contextuals--border--palette--pink--tertiary: var(--c--globals--colors--pink-550);
|
||||
--c--contextuals--border--palette--gray--primary: var(--c--globals--colors--gray-350);
|
||||
--c--contextuals--border--palette--gray--secondary: var(--c--globals--colors--gray-450);
|
||||
--c--contextuals--border--palette--gray--tertiary: var(--c--globals--colors--gray-550);
|
||||
}
|
||||
"
|
||||
`);
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user