/** * Do not edit directly, this file was auto-generated. */ declare const _styleDictionary: { readonly color: { readonly positive: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-green-500. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-green-300. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "positive-bg": { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-green-100. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-transparent-0. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly negative: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-600. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-300. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "negative-bg": { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-100. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-transparent-0. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly highlight: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-yellow-500. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-yellow-200. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "highlight-bg": { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-yellow-200. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-transparent-0. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly information: { /** * uses themable token * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-secondary-lm. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * uses themable token * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-secondary-dm. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "information-bg": { /** * uses themable token * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color.secondary-bg-lm. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-transparent-0. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly trivial: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-600. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-500. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "trivial-bg": { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-400. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-transparent-0. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly action: { readonly primary: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-700. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-300. */ readonly dm: { readonly value: string; readonly type: "color"; }; readonly hover: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-800. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-400. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; }; readonly disabled: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-100. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-800. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly warning: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-700. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-300. */ readonly dm: { readonly value: string; readonly type: "color"; }; readonly hover: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-800. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-400. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; }; }; readonly accent: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-green-200. */ readonly green: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-yellow-200. */ readonly yellow: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-pink-300. */ readonly pink: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-300. */ readonly purple: { readonly value: string; readonly type: "color"; }; readonly blue: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-blue-500. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-blue-200. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; }; readonly brand: { readonly primary: { /** * Primary Xplor brand orange */ readonly xplorange: { readonly value: string; readonly type: "color"; }; /** * Primary Xplor brand deep purple */ readonly deepspace: { readonly value: string; readonly type: "color"; }; /** * Used for brand colored surfaces */ readonly starwhite: { readonly value: string; readonly type: "color"; }; }; readonly secondary: { /** * Secondary Xplor yellow typically used for highlights and infographics */ readonly sunray: { readonly value: string; readonly type: "color"; }; /** * Secondary Xplor green typically used for highlights and infographics */ readonly supernova: { readonly value: string; readonly type: "color"; }; /** * Secondary Xplor purple typically used for UI elements and active states, highlights and infographics */ readonly neptune: { readonly value: string; readonly type: "color"; }; /** * Secondary Xplor pink typically used for highlights and infographics */ readonly pinkplanet: { readonly value: string; readonly type: "color"; }; /** * Secondary Xplor blue typically used for highlights and infographics */ readonly skyblue: { readonly value: string; readonly type: "color"; }; }; }; readonly neutral: { /** * Pure white, base neutral color */ readonly "0": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "900": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "1000": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "1100": { readonly value: string; readonly type: "color"; }; /** * Base neutral color */ readonly "1200": { readonly value: string; readonly type: "color"; }; }; readonly gray: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-0. */ readonly "0": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-50. */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-100. */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-200. */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-300. */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-400. */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-500. */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-600. */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-700. */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-800. */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-900. */ readonly "900": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-1000. */ readonly "1000": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-1100. */ readonly "1100": { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --color-neutral-1200. */ readonly "1200": { readonly value: string; readonly type: "color"; }; }; readonly purple: { /** * Base purple color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base purple color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly orange: { /** * Base orange color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base orange color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly blue: { /** * Base blue color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base blue color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly green: { /** * Base green color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base green color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly yellow: { /** * Base yellow color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base yellow color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly pink: { /** * Base pink color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base pink color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly red: { /** * Base red color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base red color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly transparent: { /** * Clear transparent color */ readonly "0": { readonly value: string; readonly type: "color"; }; readonly light: { /** * Light transparent color @ 5% opacity. */ readonly "5": { readonly value: string; readonly type: "color"; }; /** * Light transparent color @ 10% opacity. */ readonly "10": { readonly value: string; readonly type: "color"; }; /** * Light transparent color @ 25% opacity. */ readonly "25": { readonly value: string; readonly type: "color"; }; /** * Light transparent color @ 50% opacity. */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Light transparent color @ 75% opacity. */ readonly "75": { readonly value: string; readonly type: "color"; }; }; readonly neutral: { /** * Neutral transparent color @ 5% opacity */ readonly "5": { readonly value: string; readonly type: "color"; }; /** * Neutral transparent color @ 10% opacity */ readonly "10": { readonly value: string; readonly type: "color"; }; /** * Neutral transparent color @ 25% opacity */ readonly "25": { readonly value: string; readonly type: "color"; }; /** * Neutral transparent color @ 50% opacity */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Neutral transparent color @ 75% opacity */ readonly "75": { readonly value: string; readonly type: "color"; }; }; }; readonly teal: { /** * Base teal color */ readonly "50": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "100": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "200": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "300": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "400": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "500": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "600": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "700": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "800": { readonly value: string; readonly type: "color"; }; /** * Base teal color */ readonly "900": { readonly value: string; readonly type: "color"; }; }; readonly foreground: { /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-0. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-1000. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly background: { /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-50. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-1200. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "background-2": { /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-100. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-1100. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly navigation: { /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-1000. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-1000. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly stroke: { /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-400. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0 Please switch to --xpl-color-neutral-600. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly primary: { /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-orange-600 */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-orange-400 */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "primary-bg": { /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-orange-50 */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-neutral-900 */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly secondary: { /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-700 */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-300 */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "secondary-hover": { /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-800 */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-400 */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly "secondary-bg": { /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-purple-50 */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * themable * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-neutral-900 */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly text: { readonly primary: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-900. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-0. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly secondary: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-600. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-500. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly reverse: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-0. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-gray-1000. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly warning: { /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-700. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-red-300. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; readonly action: { /** * uses themable token * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-primary-lm. */ readonly lm: { readonly value: string; readonly type: "color"; }; /** * uses themable token * @deprecated This value is deprecated and will be removed in v3.0.0. Please switch to --xpl-color-primary-dm. */ readonly dm: { readonly value: string; readonly type: "color"; }; }; }; }; readonly border: { /** * Default border color */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for strong weight borders */ readonly strong: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for subtle weight borders */ readonly subtle: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for inverse borders (light on dark/dark on light) */ readonly inverse: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for borders in a hover state */ readonly hover: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for borders in an active state */ readonly active: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for borders in a focus state */ readonly focus: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative sentiment borders */ readonly negative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive sentiment borders */ readonly positive: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly accent: { /** * Default color accented borders */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Brand color accented borders */ readonly brand: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Informational accented borders */ readonly information: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Highlight accented borders */ readonly highlight: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Highlight accented borders */ readonly warning: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Subtle accented borders */ readonly subtle: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Alternative accented borders */ readonly alternative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly badge: { /** * Blue badge surface */ readonly purple: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Yellow badge surface */ readonly yellow: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Green badge surface */ readonly green: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Grey badge surface */ readonly grey: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Blue badge surface */ readonly blue: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Red badge surface */ readonly red: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Orange badge border */ readonly orange: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly background: { readonly surface: { /** * The default surface for pages and containers */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for the subtlest surfaces */ readonly subtlest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for subtle surfaces */ readonly subtle: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for bold dark surfaces */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on transparent backdrops; eg. behind a modal */ readonly backdrop: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for inverse surfaces on light surfaces where mode switching is not needed */ readonly inverse_on_light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for inverse surfaces on dark surfaces where mode switching is not needed */ readonly inverse_on_dark: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for informational surfaces */ readonly information: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for informational surfaces where a bold weight is needed */ readonly information_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive sentiment surfaces */ readonly positive: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative sentiment surfaces */ readonly negative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly transparent: { /** * Use for transparent surfaces */ readonly "0": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for elevation shadows and overlays */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for elevation shadows and overlays */ readonly "10": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for elevation shadows and overlays */ readonly "25": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for elevation shadows and overlays */ readonly "50": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for elevation shadows and overlays */ readonly "75": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly action: { /** * Use for disabled action states */ readonly disabled: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly primary: { /** * Use for primary action default state */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for primary action hover state */ readonly hover: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for primary action active state */ readonly active: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for primary action focus state */ readonly focus: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly secondary: { /** * Use for secondary action default state */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for secondary action hover state */ readonly hover: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for secondary action active state */ readonly active: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for secondary action focus state */ readonly focus: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly tertiary: { /** * Use for tertiary action default state */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for tertiary action hover state */ readonly hover: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for tertiary action active state */ readonly active: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for tertiary action focus state */ readonly focus: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly positive: { /** * Use for positive actions default state */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive actions hover state */ readonly hover: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive actions active state */ readonly active: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive actions focused state */ readonly focus: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly negative: { /** * Use for negative actions default state */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative actions hover state */ readonly hover: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative actions active state */ readonly active: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative actions focused state */ readonly focus: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly accent: { /** * Use for default accent backgrounds */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for pink accent backgrounds */ readonly pink: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for highlighted accent backgrounds */ readonly highlight: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive sentiment accents */ readonly positive: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for positive sentiments when a bold weight is needed */ readonly positive_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative sentiments */ readonly negative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for negative sentiments when a bold weight is needed */ readonly negative_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Alternative accent color */ readonly alternative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Alternative accent color in a bold weight */ readonly alternative_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for brand color accents */ readonly brand: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for subtle brand accents */ readonly brand_subtle: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for neutral accents */ readonly neutral: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for neutral accents that need a bolder weight */ readonly neutral_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly brand: { /** * Primary brand color. Used for logos and brand accents */ readonly primary: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Primary brand surface color */ readonly primary_surface: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Secondary brand color */ readonly secondary: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Secondary brand surface color */ readonly secondary_surface: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Brand tertiary color. Used primarily for surfaces */ readonly tertiary: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly badge: { /** * Default Badge surface */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Neutral sentiment Toast surface */ readonly yellow: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Neutral sentiment Toast surface */ readonly green: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Neutral sentiment Toast surface */ readonly red: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Positive sentiment toast surface */ readonly grey: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Positive sentiment toast surface */ readonly blue: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Orange badge surface */ readonly orange: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly messaging: { /** * Negative sentiment Toast surface */ readonly information: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Negative sentiment Toast surface */ readonly warning: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Yellow Badge surface */ readonly warning_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Green badge surface */ readonly positive: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Red Badge surface */ readonly positive_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Grey Badge surface */ readonly negative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Blue badge surface */ readonly negative_bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly chart: { readonly theme: { readonly vibrant: { /** * Vibrant theme color for the 1st data point */ readonly "1": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 2nd data point */ readonly "2": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 3rd data point */ readonly "3": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 4th data point */ readonly "4": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 5th data point */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 6th data point */ readonly "6": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 7th data point */ readonly "7": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Vibrant theme color for the 8th data point */ readonly "8": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly sunset: { /** * Sunset theme color for the 1st data point */ readonly "1": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 2nd data point */ readonly "2": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 3rd data point */ readonly "3": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 4th data point */ readonly "4": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 5th data point */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 6th data point */ readonly "6": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 7th data point */ readonly "7": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Sunset theme color for the 8th data point */ readonly "8": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly warm: { /** * Warm theme color for the 1st data point */ readonly "1": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 2th data point */ readonly "2": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 3th data point */ readonly "3": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 4th data point */ readonly "4": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 5th data point */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 6th data point */ readonly "6": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 7th data point */ readonly "7": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Warm theme color for the 8th data point */ readonly "8": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly cool: { /** * Cool theme color for the 1st data point */ readonly "1": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 2nd data point */ readonly "2": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 3rd data point */ readonly "3": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 4th data point */ readonly "4": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 5th data point */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 6th data point */ readonly "6": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 7th data point */ readonly "7": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Cool theme color for the 8th data point */ readonly "8": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly fun: { /** * Fun theme color for the 1st data point */ readonly "1": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 2nd data point */ readonly "2": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 3th data point */ readonly "3": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 4th data point */ readonly "4": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 5th data point */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 6th data point */ readonly "6": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 7th data point */ readonly "7": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Fun theme color for the 8th data point */ readonly "8": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly twilight: { /** * Twilight theme color for the 1st data point */ readonly "1": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 2nd data point */ readonly "2": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 3rd data point */ readonly "3": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 4th data point */ readonly "4": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 5th data point */ readonly "5": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 6th data point */ readonly "6": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 7th data point */ readonly "7": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Twilight theme color for the 8th data point */ readonly "8": { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly neutral: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly orange: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly purple: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly green: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly yellow: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly red: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly pink: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly blue: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly teal: { /** * Use for monochromatic charts where color weight is the differentiator */ readonly lighter: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly normal: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bold: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly bolder: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for monochromatic charts where color weight is the differentiator */ readonly boldest: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly icon: { /** * Default icon color and when paired with default or strong text. */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use when paired with subtle text colors or inactive actions. */ readonly subtle: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Inverse color icons (white on dark surfaces, dark on light surfaces) */ readonly inverse: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Dark icons on light backgrounds that do not mode switch. */ readonly inverse_on_light: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * White icons on dark backgrounds that do not mode switch. */ readonly inverse_on_dark: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for icons paired with disabled text or actions. */ readonly disabled: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for brand logos and icons paired with primary brand color. */ readonly brand: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for icons with negative sentiment, or paired with negative text. */ readonly negative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Highlight accented borders. */ readonly warning: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for icons in a positive sentiment or paired with positive text. */ readonly positive: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for icons communicating information */ readonly information: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly badge: { readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly yellow: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly green: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly red: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly grey: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly blue: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; readonly text: { /** * Bold text color, use for display text styles, page headings */ readonly strong: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for primary text color such as body or titles in sentence case */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for subdued text such as descriptions and details */ readonly subdued: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on inverse surfaces (light on dark surface, dark on light surface) */ readonly inverse: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on a light surface that does not mode switch */ readonly "inverse-on-light": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on text on a dark surface that does not mode switch */ readonly "inverse-on-dark": { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on positive sentiment text */ readonly positive: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on negative sentiment text */ readonly negative: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on disabled text */ readonly disabled: { readonly value: { light: string; dark: string }; readonly type: "color"; }; readonly link: { /** * Use for link text */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for default badge text */ readonly hovered: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for yellow badge text */ readonly visited: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; readonly badge: { /** * Use for green badge text */ readonly default: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for red badge text */ readonly yellow: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for gray badge text */ readonly green: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use for blue badge text */ readonly red: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on link hover states */ readonly gray: { readonly value: { light: string; dark: string }; readonly type: "color"; }; /** * Use on links that have been visited */ readonly blue: { readonly value: { light: string; dark: string }; readonly type: "color"; }; }; }; }; export = _styleDictionary; export as namespace StyleDictionary;